當用戶從ASP .NET FileUpload中的窗口中選擇圖像時，如何在瀏覽器中預覽圖像

Question

我正在使用ASP .NET，並且要上傳用戶的個人資料圖片。 我正在使用以下代碼行上傳圖像。 我想預覽用戶選擇圖像而不按上載按鈕時的圖像。

    <asp:FileUpload ID="Upload" runat="server" />

我找到了各種上傳圖片的解決方案，但是在所有解決方案中都有一個單獨的按鈕上傳圖片。 當用戶選擇圖像而不按上載按鈕時，是否有解決方案在瀏覽器中預覽圖像？ 就像facebook和gmail等

Answer 1

嘗試以下代碼段。

<asp:FileUpload ID="Upload" runat="server"  onchange="ShowPreview(this)"/>

<asp:Image ID="impPrev" runat="server" Height="200px" />  

---

Java腳本

function ShowPreview(input) {  
            if (input.files && input.files[0]) {  
                var ImageDir = new FileReader();  
                ImageDir.onload = function(e) {  
                    //Jquery
                    //$('#impPrev').attr('src', e.target.result);  
                    var image = document.getElementyId("impPrev");
                    image.src = e.target.result;
                }  
                ImageDir.readAsDataURL(input.files[0]);  
            }  
        }  

Answer 2

無論如何，都必須上傳圖像。 因此，您可以在服務器上訪問它。 有多種允許上傳的方式，而您的用戶無需明確地查看上傳按鈕。 拖放上傳是一種在后台提交上傳表單並顯示響應圖像的版本。

我將研究onclick，onfocus或onchange之類的javascript事件並處理這些事件，以便隨后可以向負責處理上載的服務器端代碼提出ajax請求。 將上傳的圖像保存在服務器上后，您將發送該圖像作為對ajax請求的響應。 其無非是顯示。 如果需要保存，則可以將其保存到正確的目的地，也可以將其刪除。 Ajax文件上傳