【问题标题】：How to update image src with the local path when user has selected an image file?用户选择图像文件后，如何使用本地路径更新图像 src？
【发布时间】：2011-03-09 14:29:08
【问题描述】：

HTML

<input type="file" name="picture" value="" />
<img id="preview_pic" src="/images/no-image.jpg" alt="" height="100" width="100" />

我可以看到“文件”输入框填充了本地文件路径。我想用这个新的本地文件路径替换 img src 来预览他们选择的图像。如果他们选择的文件不是图像文件，则保持默认的无图像原样。任何想法如何用 Jquery 做到这一点。提交表单后，我可以在服务器上处理文件。

谢谢。

[ps - 我不确定要使用哪个事件，这可以确保用户选择了一个文件。例如，当用户单击时我使用 onclick 等]

【问题讨论】：

标签： php javascript jquery image-processing

【解决方案1】：

由于安全限制，您不能这样做。对于大多数浏览器，如果通过http:// 获取的页面在其内容中有一个file:// url（或者您从file 输入构造一个），则不会检索该文件。明显的例外是旧版本的 Internet Explorer（虽然我自己没有测试过）。

有些插件使用 Adobe Flash 在上传之前启用客户端图像预览，但您还必须确保您的服务器配置正确，以便在上传发生时自行处理。

【讨论】：

使用某些浏览器中可用的一些新的 HTML5 相关 API 也可以做到这一点。

【解决方案2】：

这可能只是一个想法/想法... 您可以将要上传的图像复制到缓存网页数据的临时文件夹 internet "%temp%" 文件夹中，并尝试在客户端计算机上打开以使用 javascript 命令进行预览。

这里有可能对你有帮助的 sn-p -

x-浏览器文件输入处理

选择一张图片：

<input type='file'  onchange="document.images[0].src=getPath(this);"  />

预览

<img src="#" alt="your image"    />

兼容性

在 FF3.5、chrome、IE8 中测试。

IE8 需要更改安全设置：互联网设置、安全性、自定义级别： [] 上传文件到服务器时包含本地目录路径 ( ) 禁用 (o) 启用函数获取路径（输入）{ if(input.files && input.files[0]){ 返回 input.files[0].getAsDataURL(); } 返回输入值 || "没有选择文件"; }

我没有测试过这个。是的。这可能存在于 HTML 5 中。

【讨论】：