图片上传 - 在点击提交之前在网页上显示图片

Posted 2023-02-22

【中文标题】图片上传 - 在点击提交之前在网页上显示图片

【英文标题】：Image Upload -- showing image on web page before hitting Submit

【发布时间】：2010-12-21 11:18:58

【问题描述】：

为了更好地学习 Web 开发，我正在尝试编写一个 php 页面，它可以让我从服务器上传和下载文件，这是我以前在 ASP 中完成的。

然而，我被一些理由认为应该很简单的事情绊倒，但我无法找到答案。

这是浏览/提交的标准代码：

<form enctype="multipart/form-data" action="uploadFile.php" method="POST"/>  
<input type="hidden" name="MAX_FILE_SIZE" value="500000" />  
<input type="file" name="pix" size="100" />  
</form>

现在，当您点击生成的网页上的“浏览..”按钮时，您会看到标准文件对话框，然后返回到文本框中包含正确文件路径的页面。 （并且，当我单击提交时，我的 uploadfile.php 工作正常。）

我想要做的实际上是向用户（好吧，我）展示网页上的图片，如果它是适合 IMG 的文件，或者是非图像文件的占位符图片 - 在用户点击之前提交按钮。

注意客户端文件的正确路径名在页面上是正确的。我一生都无法弄清楚如何从 DOM 中捕获它，或者就此而言，弄清楚如何让 javascript 注意到 return-with-correct-pathname 以触发显示图片。

（对于这个问题的广泛性，我深表歉意——我确实在这里尝试了很多搜索以前的问题和答案，但是当我可能不仅缺乏技术术语而且缺乏概念时，很难提出一个问题.)

【参考方案1】：

您可以使用 Ajax 在后台提交表单并将图像文件保存到临时目录。然后，尝试通过更改img 元素的src 属性在页面上显示它。当用户最终单击提交时，将图像复制到其最终目的地。如果他取消或浏览离开 - 删除文件。

【讨论】：

两个次要的 cmets - 1) 您必须将表单提交到（隐藏的）iframe 才能上传文件。 2) 对于大图像，上传过程可能需要很长时间，因此您需要进度指示器。

好的cmets。我相信新的 html 5 对此提供了更好的解决方案（有关实际示例，请参见此页面：developer.mozilla.org/en/Using_files_from_web_applications），但它仅受 FF 3.6 beta 和 Chrome 4 beta 及更高版本的支持。

【参考方案2】：

想想你的要求。如果网页可以从您（而不是服务器的）文件系统中加载任意文件，那么如何阻止它将您的私人数据发送到任何恶意网站？

【参考方案3】：

您只能使用 Flash 执行此操作。

谷歌类似"flash image upload with preview"

【讨论】：

您可以在没有 Flash 的情况下执行此操作。所以它不是“仅使用 Flash”。

您也可以使用 Java 或 Silverlight

@X-Istence：Traveling Tech Guy 已经发布了我会发布的想法。

【参考方案4】：

您可以使用 Firefox 和其他支持 FileList API 的浏览器来执行此操作。

var myImage = new Image(),
myImage.src = myFileInput.files[0].getAsDataURL();

编辑：不应在客户端指定最大文件大小，因为它可以被利用，但您至少可以在客户端使用 files[0].getAsBinary().length 验证它。

【讨论】：

这个函数在firefox中有效！很好的答案！只是好奇哪些浏览器不支持它？

@m.u.sheikh：嗯，大的可能是 Internet Explorer。不过，这只是一个猜测。

【参考方案5】：

您的问题确实没有单一的解决方案。但在网络的当前状态下，最好的方法是 Flash。 See this post for a how-to。 Flash 是一种专有解决方案，但已在 98% 以上的计算机上实施，因此很安全。只需确保按照渐进式增强/优雅降级方法实现它即可。

您可以通过 java 小程序来实现，它广泛可用且非专有，但这对我来说似乎有点矫枉过正（但我不是 java 开发人员）。

银光？好吧，和大多数用户说再见。据我所知，它远未普及。所以人们必须安装一个插件才能看到你的用户界面。不过，在某些情况下可能没问题（内联网、您可以自己手动设置的一组固定机器等）。

基于 ajax 的解决方案具有不基于专有技术的优势，但这意味着将文件上传到服务器，因此在您的情况下它不是一个解决方案，因为对于大图像，它需要很长时间，并且感觉不像是预览版了，对吧？

【讨论】：

对于除 IE9 和更早版本之外的所有浏览器，无需向服务器发送任何数据即可完成此操作。如果 IE9 和更早版本需要预览，如您所说，您需要使用 Flash，或者先将文件发送到服务器。

【参考方案6】：

如果您正在寻找非 IE（包括 IE 9）解决方案，这可能就是解决方案。 （当然有微调） http://www.html5rocks.com/en/tutorials/file/dndfiles/

否则，您必须上传并从服务器获取路径才能显示缩略图或预览。还有其他一些方法，如 flash / java / silverlight，适用于大多数浏览器，但它仍然不是一个纯粹的 Web 解决方案。