如何在實際發送到服務器之前顯示正在上載的圖像的預覽

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 /