从文件输入中本地预览图像 (失败)

不久前有一篇关于 Ajax 图像预览 的客座文章。 这是一个不错的技巧，但它让我和其他一些评论者思考：如果不用上传图像就可以预览它，那不是很好吗？ 毕竟，图像已经在用户的电脑上了，为什么我们不能直接获取本地文件路径并将其用作src图像。

好吧，问题在于获取文件路径。 我在不同的浏览器中进行了一些研究和测试，并记录了结果。

起源

这个想法来自于这样一个事实：你可以在选择文件后看到文件输入中的文件路径。

安全问题

出于我的天真，我只是想“嘿，我们只需要获取输入的值，并将其用作 src 旁边输入框的图像元素！” 我很快意识到，允许浏览器查看本地文件路径会存在一些安全问题。 如果文件输入愿意吐出这样的数据，恶意脚本可能会了解您本地文件系统的大量信息。

浏览器实际做什么

Internet Explorer & Opera

这两个浏览器在尝试访问文件输入的值时都会返回类似这样的值

C:\fakepath\image.png

这篇文章 有更多关于这个主题的信息。 显然，如果您将该网站添加到 Internet Explorer 中的“受信任的站点”列表中，它将返回文件路径。 但当然，您不能期望用户这样做。

WebKit (Safari / Chrome)

对于文件输入值不返回任何值。

Firefox

Firefox 的独特之处在于它仅返回文件输入值的文件名。 虽然这显然无法让本地图像预览工作，但 StackOverflow 上的这个主题 导致了一个有趣的解决方案。

虽然它不会提供文件路径，但 Firefox 允许您在该输入的 DOM 文件属性上使用名为“getAsDataURL()”的函数。

// Browser supports `files` as part of DOM
if (this.files) {
    
   //  This works in Firefox, #image-preview is an <img src="" />
   $("#image-preview").attr("src", this.files[0].getAsDataURL());
      
}

查看演示 （只有 Firefox 有反应）