Question

为了更好地学习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注意到返回正确的路径名以触发显示图片。

（我为这个问题的广泛性道歉 - 我确实在这里尝试了很多以前的问题和答案，但是当我不仅缺乏技术术语而且缺乏概念时，很难提出一个问题。）

Answer 1

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

Answer 2

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

Answer 3

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

谷歌类似"flash image upload with preview"

Answer 4

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

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

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

Answer 5

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

你可以通过一个java applet来实现它，它可以广泛使用并且非专有，但这对我来说似乎有点过分（但我不是java开发人员）。

Silverlight的？好吧，对大多数用户说再见。据我所知，它远未被广泛使用。所以人们将不得不为他们安装一个插件，以便能够看到你的用户界面。在某些情况下可能没问题（内联网，你可以手动设置的一组固定的机器等）。

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

Answer 6

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

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

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

6 个答案: