用JavaScript实现“上传并预览图片”时，默认浏览器Firefox无法获得图片路径，显示fakepath，如何解决？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用JavaScript实现“上传并预览图片”时，默认浏览器Firefox无法获得图片路径，显示fakepath，如何解决？相关的知识，希望对你有一定的参考价值。
使用chrome时出现同样问题，但是IE好像就能正常显示。
如何获得正确路径？JS菜鸟求指教。
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function readFile(field, image)
var obj_0=document.getElementsByName(field)[0];
var obj_1=document.getElementsByName(image)[0];
if(obj_0 == null || obj_1 == null)
alert("Pleas select an image");
return false;
else
obj_1.src="file:///"+obj_0.value;
return true;
</script>
<title>Image Upload</title>
</head>
<body>
<form name="form" action="">
<img name="image" src=""/>
<input type="file" name="upload" onchange="return readFile('upload','image')"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
浏览器安全性已经大大提高，要实现图片上传预览不是那么简单了
不过有很多变通或先进的方法来实现
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法
具体可以参考这个图片上传预览效果
参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?7=u&id=11586
参考技术A 先把代码发上来看看，肯定用了ie才支持的activeX,万恶的ie又害人了 参考技术B 也是一个教训啊，以后测试记得在firefox下面做，好了再到IE上面做小修改 参考技术C if(obj_0 == null || obj_1 == null)alert("Pleas select an image");
return false;
else
obj_1.src="file:///"+obj_0.value;
alert(obj_1.src);//加入这句打印信息
return true;
在指定位置添加alert语句，你再测试会发现，在chorme下obj_0.value只取到了图片的相对地址，也就是图片本身的名字，而图片所在的路径被丢弃了，从而导致显示不正确。这可能是各种浏览器对file控件实现的不同造成的。 参考技术D 您好！很高兴为您答疑！
目前新的浏览器都是禁止服务器通过客户端脚本获取完整路径的。
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
以上是关于用JavaScript实现“上传并预览图片”时，默认浏览器Firefox无法获得图片路径，显示fakepath，如何解决？的主要内容，如果未能解决你的问题，请参考以下文章
不通过服务器控件时用前端javascript与c#后台交互的方法