如何在实际发送到服务器之前显示正在上载的图像的预览

Question

我的aspx页面中有一个FileUpload控件，我想在回发之前显示所选的图像，以便用户确认要上传的图像。

Answer 1

您可以使用此AJAX Control Toolkit控件进行图像确认。

Answer 2

您正在寻找的是需要一个纯客户端解决方案，我认为这是不可能的，因为他们无法访问文件系统（在正常情况下）。

请注意，使用AJAX需要首先将文件实际发送到服务器。

Answer 3

这可以通过HTML5现在完成，

http://www.html5rocks.com/en/tutorials/file/dndfiles/

选择上传后，您想要读取该文件

readAsBinaryString

然后你需要将该二进制文件转换为Base64，以便在页面上显示它，

http://www.webtoolkit.info/javascript-base64.html

然后你需要把它放在src EG中的img标签上

<img src="data:{image/mime_type};base64,{base64_binary_data}" width="100" height="100" />

其中{image / mime_type}是图像的mime类型，他们上传了EG image / png，image / jpg

并且{base64_binary_data}是通过base64转换后的readAsBinaryString

Answer 4

通过HTML无法实现。 但有可能使用闪光/银光。

我之所以这么说，是因为我想在用户上传文件之前想知道文件的大小，就会遇到问题。 Html不会让你知道这一点，用户必须先上传整个文件才能说出它有多大。

但是，解决方法是使用闪存，因为闪存似乎有权从本地磁盘中获取有关文件的数据，然后再将其发送到服务器（当然用户选择文件后）。 因为它可以获取文件名，大小等，所以我想你也可以抓取图像数据然后显示它。

Answer 5

你将需要使用闪光灯或silverlight来做到这一点。 这是一篇文章，其中介绍了如何使用Flash： http ： //blog.flexexamples.com/2008/08/25/previewing-an-image-before-uploading-it-using-the-filereference-class-in -flash玩家-10 /