显示所选图像的缩略图

Question

我需要在HTML表单中显示所选图像附近的缩略图。

<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
</form>

此外，我已将move_uploaded_file函数编写为php部分。 我需要的是在提交表格之前我需要显示我选择的图像的缩略图。我怎么能实现这个目标呢？

Answer 1

由于现代浏览器的安全限制，如果没有实际上传文件，则无法再进行此操作。

• 在某些浏览器中，无法再链接到本地​​图像

• IE7 +和FF3 +（我认为其他现代浏览器也不会再显示完整的图像路径），而是提供C:\Fakepath样式路径。

Answer 2

我建议使用fabrik推荐的缩略图图片。

如果您想自己做（或者如果您只是想了解它是如何完成的）：

您需要使用iframe处理图像上传（因为AJAX不支持文件上传），然后您可以使用上传的图像创建元素（通过从AJAX调用获取id或通过一些关于它将如何发生的一种惯例）并将它放在你需要的任何地方。

我认为，Coding Freak推荐的解决方案不起作用。我不记得DOM能够使用输入为用户选择的文件提供完整目录。据我所知，你只能访问文件的名称（不是所有目录）......出于安全考虑，这似乎是显而易见的。

还有可能使用Java小程序（EWWW）或Flash（只是一点点）。或者，如果你想要前卫，请使用HTML5的文件API，但很多浏览器都不支持它。

Answer 3

试试HTML5Rocks' example。它做你想要的。