從ASP.NET FileUpload控件使用Java腳本加載圖像

Question

我試圖在用戶使用asp.net fileupload選擇一個圖像后，用圖像加載一個asp圖像框<asp:Image ID="imgPicture" width="200" height="200" runat="server" /> “ <asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/> <asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>

的HTML

<asp:Image ID="imgPicture" width="200" height="200" runat="server" />
<asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>

Java腳本

<script type="text/javascript">
    function LoadImage(path, img) {
        imgPrev = document.images[img];
        imgPrev.src = path;
   }
</script>

該圖像將不會加載到imgPicture控件中。 我還注意到，通過向javascript函數添加警報以警告路徑和圖像，該路徑為C:\\fakepath\\ImageName.jpg 。 我不確定為什么會說是fakepath。

任何幫助表示贊賞。 還要注意，該項目后面有一個C＃代碼文件。

Answer 1

輸入所有內容后，我將FileInput控件代碼更改如下：

<asp:FileUpload ID="fluPicture" onchange="if (confirm('Upload ' + this.value + '?')) this.form.submit();" runat="server" Width="200"/>

然后，我向Page.OnLoad事件添加了一個測試，以確定文件是否准備好上載。

if (fluPicture.PostedFile != null && fluPicture.PostedFile.ContentLength > 0) UploadImage();

然后，我允許UploadImage（）方法上傳圖像，將其存儲，然后將圖像框的URL設置為上傳圖像的URL。

謝謝大家的幫助和投入。 另外，我感謝jQuery的想法。 在這種情況下，我只需要快速又臟的東西來完成工作即可。

Answer 2

您只有先發回郵件，然后才能上傳文件，這聽起來像是您僅瀏覽到文件然后嘗試獲取縮略圖，然后再發回/上傳圖像。

Answer 3

ASP.Net（HTML）代碼：

<asp:FileUpload ID="FileUpload1" runat="server" Height="22px" onchange="showImage()"/>
<asp:Image ID="Image1" runat="server" Width="200PX" Height="200PX"   />

JAVASCRIPT代碼：

function showImage() 
        {
            // Get File Upload Path & File Name
            var file = document.getElementById("FileUpload1");
            // Set Image Url from FileUploader Control
            document.getElementById("Image1").src = file.value;
            // Display Selected File Path & Name
            alert("You selected " + file.value);
            // Get File Size From Selected File in File Uploader Control 
            var inputFile = document.getElementById("FileUpload1").files[0].size;
            // Displaty Selected File Size
            alert("File size: " + inputFile.toString());
        }

我認為那可以幫助您。 它在我的電腦上完美運行。