x-browser文件输入处理

Question

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]

Answer 1

由于安全限制，您无法执行此操作。对于大多数浏览器，如果通过http://获取的页面内容中包含file://网址（或者您从file输入中构建了一个网址），则不会检索该文件。明显的例外是旧版本的Internet Explorer（虽然我自己没有测试过）。

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

Answer 2

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

以下是可能对您有用的代码段 -

x-browser文件输入处理

选择图像：

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

预览

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

兼容性

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

IE8 needs a security settings change: internet settings, security, custom level :

[] Include local directory path when uploading files to a server
    ( ) Disable
    (o) Enable

function getPath（input）{ if（input.files＆amp;＆amp; input.files [0]）{ return input.files [0] .getAsDataURL（）; } return input.value || “没有选择文件”; }

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

如何在用户选择图像文件时使用本地路径更新图像src？

2 个答案:

x-browser文件输入处理

选择图像：

预览

兼容性