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

Question

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

Answer 1

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

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AsyncFileUpload/AsyncFileUpload.aspx

Answer 2

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

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

Answer 3

现在可以通过HTML5完成，

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

选择上传后，您想要使用

读取文件

readAsBinaryString

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

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

然后你需要把它放在src E.G

中的img标签上

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

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

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

Answer 4

通过HTML无法实现。但是可以使用flash / silverlight。

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

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

Answer 5

你需要使用闪光灯或silverlight来做到这一点。 这是一篇文章，其中解释了如何使用flash执行此操作： http://blog.flexexamples.com/2008/08/25/previewing-an-image-before-uploading-it-using-the-filereference-class-in-flash-player-10/