用JavaScript实现“下传并预览图片”时
日期：2014-05-16 浏览次数：20379 次
用JavaScript实现“上传并预览图片”时，
用JavaScript实现“上传并预览图片”时，默认浏览器Firefox无法获得图片路径，显示fakepath，如何解决？ 浏览次数：1005次悬赏分：5 | 解决时间：2010-12-2 11:14 | 提问者：薯类赵
使用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
分享给你的朋友吧：
i贴吧
新浪微博
腾讯微博
QQ空间
人人网
豆瓣
MSN
对我有帮助
1回答者：热心网友 | 回答时间：2010-11-23 01:40 | 我来评论
提问者对于答案的评价：
多谢各位，发现这个问题很难解决……
推荐答案 先把代码发上来看看，肯定用了ie才支持的activeX,万恶的ie又害人了回答时间：2010-11-22 09:16
向TA求助 回答者： scokpio 来自团队 js开发 | 三级采纳率：16%
擅长领域： 其他编程语言
参加的活动： 暂时没有参加的活动
相关内容
2006-10-13 为什么我Mozilla Firefox浏览器会不能上传图片也不能邮件发图片 2011-2-15 Firefox火狐浏览器能够上传图片到百度空间吗？ 1 2011-6-22 Javascript 下IE8使用 onblur事件导致浏览器崩溃、Firefox、Chrome浏览... 2008-12-9 javascript页面在firefox和google浏览器中都可以浏览，但是在IE中却不能... 3 2011-2-22 下面一段HTML里的javascript脚本，在FireFox下能弹出2级导航，IE等其他... 更多关于ie预览上传图片的问题>>
查看同主题问题： 浏览器 firefox firefox 图片
等待您来回答0回答广西南宁连锁经营上总后真的有6-10万保底吗？合法吗？是国家项目吗？0回答花花大世界9月底有什么好玩的吗？是去游玩的好时段吗？0回答听说燕郊安装北京电话的公司里亿联做的算好的是真的吗0回答太阳星座，上升星座，月亮星座分别是怎么计算的？0回答在南宁哪能学开挖掘机和推土机0回答我想把户口和档案从龙育公司迁出到省人才，打两边的电话打不通，请问...0回答南宁买真文凭？购买本科文凭可以吗 ？1回答南宁到梧州的高铁什么时候修好呢？更多等待您来回答的问题>>
其他回答 共2条
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控件实现的不同造成的。 回答者： 四号楼的灯 | 四级 | 2010-11-22 10:23
也是一个教训啊，以后测试记得在firefox下面做，好了再到IE上面做小修改
用JavaScript实现“上传并预览图片”时，默认浏览器Firefox无法获得图片路径，显示fakepath，如何解决？ 浏览次数：1005次悬赏分：5 | 解决时间：2010-12-2 11:14 | 提问者：薯类赵
使用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
分享给你的朋友吧：
i贴吧
新浪微博
腾讯微博
QQ空间
人人网
豆瓣
MSN
对我有帮助
1回答者：热心网友 | 回答时间：2010-11-23 01:40 | 我来评论
提问者对于答案的评价：
多谢各位，发现这个问题很难解决……
推荐答案 先把代码发上来看看，肯定用了ie才支持的activeX,万恶的ie又害人了回答时间：2010-11-22 09:16
向TA求助 回答者： scokpio 来自团队 js开发 | 三级采纳率：16%
擅长领域： 其他编程语言
参加的活动： 暂时没有参加的活动
相关内容
2006-10-13 为什么我Mozilla Firefox浏览器会不能上传图片也不能邮件发图片 2011-2-15 Firefox火狐浏览器能够上传图片到百度空间吗？ 1 2011-6-22 Javascript 下IE8使用 onblur事件导致浏览器崩溃、Firefox、Chrome浏览... 2008-12-9 javascript页面在firefox和google浏览器中都可以浏览，但是在IE中却不能... 3 2011-2-22 下面一段HTML里的javascript脚本，在FireFox下能弹出2级导航，IE等其他... 更多关于ie预览上传图片的问题>>
查看同主题问题： 浏览器 firefox firefox 图片
等待您来回答0回答广西南宁连锁经营上总后真的有6-10万保底吗？合法吗？是国家项目吗？0回答花花大世界9月底有什么好玩的吗？是去游玩的好时段吗？0回答听说燕郊安装北京电话的公司里亿联做的算好的是真的吗0回答太阳星座，上升星座，月亮星座分别是怎么计算的？0回答在南宁哪能学开挖掘机和推土机0回答我想把户口和档案从龙育公司迁出到省人才，打两边的电话打不通，请问...0回答南宁买真文凭？购买本科文凭可以吗 ？1回答南宁到梧州的高铁什么时候修好呢？更多等待您来回答的问题>>
其他回答 共2条
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控件实现的不同造成的。 回答者： 四号楼的灯 | 四级 | 2010-11-22 10:23
也是一个教训啊，以后测试记得在firefox下面做，好了再到IE上面做小修改
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
