Php 图片上传——点击提交前在网页上显示图片

为了更好地学习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>

现在，当您点击结果网页上的“Browse..”按钮时，您将获得标准文件对话框，然后返回到文本框中具有正确文件路径的页面。（而且，当我单击Submit时，我的uploadfile.php工作正常。）

我想做的是在用户单击提交按钮之前，在网页上向用户（嗯，我）显示图片，如果它是一个适合IMG的文件，或者是一个非图像文件的占位符图片

注意，客户端文件的正确路径名就在页面上。我一辈子都不知道如何从DOM中捕获它，也不知道如何让JavaScript注意到返回的正确路径名，从而触发显示图片

---

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

您可以使用Ajax在后台提交表单，并将图像文件保存到临时目录中。然后，通过更改

img

元素的

src

属性，尝试在页面上显示它。当用户最后单击submit时，将图像复制到其最终目的地。如果他取消或浏览-删除文件。

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

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

---

谷歌类似于

您可以通过Firefox和其他支持文件列表API的浏览器来实现这一点

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

---

编辑：不应在客户端指定最大文件大小，因为它可以被利用，但您至少可以在客户端使用

文件[0].getAsBinary（）.length

验证它。确实，您的问题没有单一的解决方案。但在目前的网络状态下，最好的方法是Flash。Flash是一个专有的解决方案，但在98%以上的计算机上实现，所以它是安全的。只需确保您按照渐进增强/优雅降级方法实现它

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

银灯？那么，跟你的大多数用户说再见吧。据我所知，它还远没有被广泛使用。所以人们必须安装一个插件才能看到你的用户界面。但在某些情况下（内部网，一组您可以自己手动设置的固定机器，等等），这可能还可以

---

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

如果您正在寻找非IE（包括IE 9）解决方案这可能就是解决方案。（当然有调整）

---

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

您可以在没有flash的情况下实现这一点。所以它不仅仅是“使用Flash”，你还可以使用Java或JavaSilverlight@X-Istence：旅行技术人员已经发布了我本应该发布的想法。两个小评论-1）你必须将表单提交到（隐藏的）iframe，以便上传文件。2） 对于大型图像，上传过程可能需要很多时间，因此您需要进度指标。评论不错。我相信新的HTML5提供了一个更好的解决方案（请参阅本页的实际示例：），但它只受FF 3.6测试版和Chrome4测试版及以上版本的支持。该功能在firefox中工作！回答得好！只是想知道哪些浏览器不支持它？@m.u.sheikh：嗯，最大的可能是Internet Explorer。不过，这只是一个猜测。对于除IE9和更旧版本以外的所有浏览器，这可以在不向服务器发送任何数据的情况下完成。如您所说，如果IE9及更旧版本需要预览，您需要使用Flash，或者首先将文件发送到服务器。