Asyncfileupload file preview doesn’t show

I am having an Ajax Asynchronous file upload control in update panel. My upload works fine but after the upload is completed., I need to see the image I have uploaded.
But it doesnt work here is what I have done

function UploadComplete(sender, args) {
        var filename = args.get_fileName();
        var contentType = args.get_contentType();
        if (contentType.indexOf('image') == -1) {
            document.getElementById('<%=lblStatus.ClientID%>').innerText = "Uploaded file must be an Image!"+ "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
            document.getElementById('<%=AsyncFileUpload1.ClientID%>').text.style.backgroundColor = "Red";
        }
        else {
            var text = "" + filename + "      |      " + args.get_length() + " bytes"+"Uploaded Succesfully";
            document.getElementById('<%=lblStatus.ClientID%>').innerText = text;
              $get("imageView1").src = "./~/" + filename;
        }
    }

AspCode:

<ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server"    
        OnClientUploadError="uploadError"    
        OnClientUploadStarted="StartUpload"  
        OnClientUploadComplete="UploadComplete"  
        CompleteBackColor="Lime" UploaderStyle="Modern"    
        ErrorBackColor="Red" ClientIDMode="AutoID"    
        ThrobberID="Throbber"    
        UploadingBackColor="#66CCFF" 
            onuploadedcomplete="AsyncFileUpload1_UploadedComplete" /> 

 <asp:Label ID="Throbber" runat="server" Style="display: none">
 <asp:Image runat="server" ID="imgPreview" ImageUrl="~/Images/uploading.gif" />
        </asp:Label>
        <img runat="server" id="imageView1"/>
 <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can use the OnUploadedComplete event to display the image.

<ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnUploadedComplete="ProcessUpload"

protected void ProcessUpload(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
string fileName = Server.MapPath("./") + "image.jpg";
AsyncFileUpload1.SaveAs(fileName);

ScriptManager.RegisterClientScriptBlock(AsyncFileUpload1, AsyncFileUpload1.GetType(), "img",
    "top.document.getElementById('imgUpload').src='image.jpg';", 
    true);
}

For Details on how to show the preview take a look at this example: AJAX File Upload in ASP.NET with the AsyncFileUpload Control

Method 2

I don’t think “~” will work with HTML controls. Try converting the path to actual path and set the Image src.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0