通过 Javascript 预览 Html 文件上传答案

【问题标题】：Html file upload preview by Javascript通过 Javascript 预览 Html 文件上传
【发布时间】：2009-08-11 11:21:40
【问题描述】：

我想为一个帖子展示一个 PREVIEW 之类的东西，所以用 JS 来详细说明

但是当涉及到 <input type="file" 时，问题就来了，它没有给出文件的完整路径

例如：如果我这样做了

$("#image").val();

它只给出“Sunset.jpg”而不是 C:\Documents and Settings\All Users....\Sunset.jpg

知道如何获得该详细值吗？

【问题讨论】：

【解决方案1】：

尽管正如其他人已经指出的那样，您无法在 JavaScript 中了解文件的完整路径，但也许完全不同的解决问题的方法可能仍然适合您。

您可以在访问者选择照片后立即自动上传照片（您在 GMail 以及其他应用程序中看到的行为），因此即使访问者继续与您的页面进行交互，它也会驻留在您的服务器上。此时，显示预览就像从您自己（现在是服务器端）的图像副本中提供一个预览一样简单。

【讨论】：

【解决方案2】：

如果出于安全原因，您无法使用 JavaScript 从用户系统读取文件。

如果您碰巧找到了解决方法，浏览器供应商可能会尽快发布安全补丁。我知道，因为在早期版本中，如果 IE，可以读取完整路径并因此显示预览，至少如果文件是图像。我在 CMS UI 中使用了它，但是这个漂亮的功能当然被 IE 服务版本破坏了：-/

一般来说，出于安全原因，文件上传控件有点像“黑匣子”。您对脚本和样式的访问权限非常有限。这样您就无法在用户不知情的情况下窥探或上传文件，或者您无法通过欺骗性界面欺骗用户上传文件。

【讨论】：

【解决方案3】：

虽然他们显示的代码似乎无法在 Chrome 中运行，但我猜测即使是用于此类事情的 HTML5 JavaScript API 也尚未标准化。

【讨论】：

【解决方案4】：

这是一项安全功能。您无法在安全浏览器中更改或获取整个路径，因此您想做的事情无法完成。如果您使用 Flash、Silverlight 或 Java 之类的东西，那么它应该相对容易。

【讨论】：

【解决方案5】：

据我所知，没有办法在 javascript 中做你想做的事。这是一个相当大的安全问题 - 在浏览器中访问文件系统。

有一些浏览器插件（java/flash/gears）可以让你做这种事情。我知道使用齿轮可以让用户选择一个文件 - 并打开它以使用 JS 读取内容。

【讨论】：