用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实现上传图片前的预览功能，并且检查图片的大小，确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用，因为它允许...
JavaScript实现图片上传并预览并提交AJAX是一个常见的前端功能，尤其在现代Web应用中，用户经常需要上传图片。这个完整DEMO展示了如何利用JavaScript、AJAX和HTML5的File API来实现这一过程。以下是对这个功能的详细...
在JavaScript中实现图片上传并预览功能是一项常见的前端任务，主要涉及到HTML5的...以上是实现“js图片上传并预览图片”的主要技术点和步骤，理解并掌握这些知识点，可以构建出稳定且用户体验良好的图片上传预览功能。
图片上传之前预览 JavaScript实现 在IE11、猎豹、FF能用
在JavaScript中，`FileReader` API用于读取用户选择的文件，并使用`data URL`预览图片；而Ajax则负责将文件数据发送到服务器。 **实时显示** 是通过Ajax的异步特性实现的，服务器处理图片上传后，返回一个确认消息...
JavaScript 图片上传预览功能是网页开发中常见的一种交互设计，允许用户在正式提交文件之前先查看所选图片的效果。这种功能通常用于提高用户体验，确保用户上传的图片符合预期的格式和尺寸。以下是对给定代码的详细...
本文将详细介绍如何利用jQuery来实现上传图片时的实时预览，并加入鼠标悬浮时跟随鼠标移动显示大图的效果。 #### 技术栈与环境准备 1. **HTML/CSS**: 构建页面布局和样式。 2. **JavaScript/jQuery**: 实现核心...
`FileReader`对象提供了多种方法，如`readAsDataURL()`，可以将文件读取为Base64编码的数据URL，这在预览图片时非常有用： ```javascript var reader = new FileReader(); reader.onload = function(event) { var ...
- 实现图片预览功能，使用JavaScript编写即时图片预览的代码，当用户选择图片时，预览区域会显示选中的图片。 - 使用base64编码方式将图片存储为字符串，并在视图中用标签展示。Razor语法可以帮助简化此过程。 5. ...
在JavaScript代码中，我们可以通过 `sender.files[0]` 获取选择的文件对象，并通过 `getAsDataURL()` 方法将其转换为DataURL形式，以便在浏览器中预览图片。 2. 图片预览实现 在CSS中，我们定义了三个对象：`#...
当文件读取完成后，`onload`事件会被触发，更新预览图片的`src`属性。 至于CSS，它可以用来改变预览头像的样式，使其看起来更符合圆形头像的要求。例如，我们可以设置一个带有圆角的图片容器，并通过CSS的`border-...
在JavaScript编程中，实现上传图片的预览效果是一项常见的需求，尤其在网页表单和多媒体交互应用中。这里，我们关注的是如何在用户选择图片文件后，在上传之前就能在页面上展示图片的预览，而无需等待实际的上传过程...
在本文中，我们将深入探讨如何使用AngularJS框架来实现图片上传和预览功能。AngularJS，作为一款强大的前端JavaScript框架，提供了丰富的功能和模块化设计，使得开发动态Web应用变得更加简单。图片上传和预览是现代...
预览图片的大小可以通过JavaScript动态修改`<img>`标签的`height`和`width`属性来实现。在示例代码中，用户可以输入图片的宽度和高度，`img()`函数会根据这些值调整预览图片的尺寸。 3. 上传格式控制： 虽然前端...
JavaScript图片预览是一种常见的网页交互功能，允许用户在点击或悬停在图片链接上时预览图片内容，而无需实际加载整个图片。这种技术在网页设计中广泛应用，尤其是在处理大量图片展示或者上传功能时，提高了用户体验...
在JavaScript编程中，预览图片是一项常见的需求，特别是在文件上传功能中。用户在选择图片文件后，能够在上传之前先预览图片，这样可以提供更好的用户体验，确保用户上传的图片符合预期。这个标题提到的"js预览图片 ...
4. 创建`<img>`元素并设置数据URL作为源，预览图片。 5. 可选地，添加图片大小、格式检查和上传功能。 以上就是使用JavaScript实现图片上传预览效果的基本流程和关键代码。这个功能可以应用于各种Web应用，如社交...
对于每个图片文件，我们可以创建一个预览图并将其添加到已上传图片列表中： ```javascript for (var i = 0; i ; i++) { var file = files[i]; var reader = new FileReader(); reader.onload = function(e) { ...
接下来，我们需要使用JavaScript来捕获文件选择事件并实现预览功能。当用户选择图片后，我们可以访问`FileReader`接口，它提供了读取文件的API。通过`readAsDataURL`方法，我们可以将图片文件转化为数据URL，这是一...
html多图片上传并在线预览 用javascript实现