如何在实际将其发送到服务器之前显示正在上传的图像的预览答案

【问题标题】：How to show preview of image being uploaded before actually sending it to server如何在实际将其发送到服务器之前显示正在上传的图像的预览
【发布时间】：2012-01-11 06:44:09
【问题描述】：

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

【问题讨论】：

如果这可以通过纯 html 实现，那么您将在许多天前在社交网站上看到此功能。需要在拍摄图像预览之前发布数据。
它可能可以使用 HTML5，不过...我在想类似 gmail 中的文件放置区
How to preview a image before uploading it to the server? 的可能重复项

标签： c# javascript asp.net vb.net

【解决方案1】：

您可以使用此 AJAX 控件工具包控件进行图像确认。

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

【讨论】：

您可以将图像存储在临时目录中并显示在标签中。如果用户重新上传图像，您必须删除该图像并存储新图像并显示在标记中。两者都包含在更新面板中。

【解决方案2】：

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

通过 HTML 是不可能的。但可能使用闪光灯/银光。

我之所以这么说是因为我记得在用户上传文件之前我想知道文件有多大时遇到了一个问题。 Html 无法让您知道这一点，用户必须上传整个文件才能说出它有多大。

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

【讨论】：

请你给我提示从哪里开始，我不知道使用闪存
linkerro 提供了一个很好的链接，这是我在谷歌快速搜索后发现的。如果您设法做到这一点，最好知道它是否可以正常工作..

【解决方案5】：

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

【讨论】：

谢谢，但是asp.net怎么办？
你不能只使用 asp.net 来做到这一点。