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

为了更好地学习网络开发，我试图编写一个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适合文件或非图像文件的占位符图片 - 在用户单击提交按钮之前。

注意客户端文件的正确路径名在页面上为RIGHT。我不能为了我的生活找出如何从DOM中捕获它，或者为此弄清楚如何让JavaScript注意到返回正确路径名以便触发显示图片。（我对这个问题的广泛性表示歉意 - 我在这里试过了很多关于以前的问题和答案的搜索，但是当我不仅仅缺乏技术术语而是概念时，很难构建一个问题）。

来源

2009-11-29 Connie H.

您可以用Firefox和支持文件列表API其他浏览器做到这一点。

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

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

来源

2009-11-30 04:49:00

此功能在Firefox中可用！很好的回答！只是好奇哪些浏览器不支持它？ – umar 2009-12-11 10:31:49

@ m.u.sheikh：那么，大的可能是Internet Explorer。虽然这只是一个猜测。 – Powerlord 2009-12-11 20:51:05

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

来源

2009-11-29 21:43:15

两个小问题 - 1）您必须将表单提交给（隐藏）iframe才能上传文件。 2）对于大图像，上传过程可能需要很长时间，因此您需要进度指示器。 – 2009-11-30 23:36:10

好评。我相信新的HTML 5为此提供了更好的解决方案（请参阅此页面中的实际示例：https：//developer.mozilla.org/en/Using_files_from_web_applications），但它仅受FF 3.6 beta和Chrome 4 beta及更高版本的支持。 – 2009-12-01 00:00:51

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

来源

2009-11-29 21:45:47

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

谷歌类似"flash image upload with preview"

来源

2009-11-29 21:49:09

您可以在不使用闪光灯的情况下进行此操作。所以它不是“只有Flash”。 – MitMaro 2009-11-29 21:59:41

@MitMaro：所以发布解决方案... – 2009-11-29 23:07:37

你也可以使用Java或Silverlight – 2009-11-29 23:57:56

的确，对于您的问题没有单一的解决方案。但在目前的网络状态下，最好的方式就是Flash。 See this post for a how-to。 Flash是一种专有的解决方案，但在所有计算机的98％以上都实现了，所以它是安全的。只要确保你遵循逐步增强/优雅的降级方法来实现它。

你可以通过一个Java小程序来做到这一点，它是广泛可用和非专有的，但这似乎矫枉过正（但我不是Java开发人员）。

Silverlight？那么，请向大多数用户说再见。据我所知，它远没有被广泛使用。所以人们将不得不为他们安装插件才能看到你的UI。但是，在某些情况下（内联网，您可以自己手动设置的一组固定机器等）可能没有问题。

基于ajax的解决方案具有不基于专有技术的优势，但它意味着将文件上传到服务器，所以它不是针对您的情况的解决方案，对于大图像而言，需要相当长的时间，它不会再像预览一样了吧？

来源

2009-12-11 20:46:09 pixeline

这可以在不向IE9及其以上的所有浏览器发送任何数据的情况下完成。如果您需要IE9及更高版本的预览功能，那么您需要使用Flash，或者先将文件发送到服务器。 – 2013-05-10 15:22:16

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

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

来源

2013-05-10 11:39:49 nightgaunt

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

回答

相关问题