Display image after upload without page refresh or postback using ASP.Net AjaxFileUpload Control

Last Reply 2 months ago By pandeyism

Posted 2 months ago

hello,

i am using file upload control to upload file in directory

<asp:AjaxFileUpload ID="AjaxFileUpload11" runat="server" MaximumNumberOfFiles="5"
    Width="400px" OnUploadComplete="OnUploadComplete" />

  <asp:Image ID="Image1" runat="server" />

 

protected void OnUploadComplete(object sender, AjaxFileUploadEventArgs e)
{
    string fileName = Path.GetFileName(e.FileName);
    string filePath = "~/Uploads/" + fileName;
    AjaxFileUpload11.SaveAs(Server.MapPath("~/Uploads/" + fileName));
}

i want after image successfully uploaded it should bind with image control above without full postback please advice

Posted 2 months ago

Hi nauna,

Check this example. Now please take its reference and correct your code.

HTML

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" MaximumNumberOfFiles="1"
        OnUploadComplete="FileUploadComplete" OnClientUploadComplete="uploadComplete" />
    <br />
    <asp:Image ID="imgDisplay" runat="server" Style="display: none" />
    <script type="text/javascript">
        function uploadComplete(sender, args) {
            var imgDisplay = $get("imgDisplay");
            imgDisplay.style.display = "block";
            imgDisplay.style.cssText = "height:100px;width:100px";
            imgDisplay.src = "<%=ResolveUrl(UploadFolderPath) %>" + args.get_fileName().substring(args.get_fileName().lastIndexOf('\\') + 1);
        }
    </script>
    </form>
</body>
</html>

Namespaces

C#

using AjaxControlToolkit;
using System.IO;

VB.Net

Imports AjaxControlToolkit
Imports System.IO

Code

C#

protected string UploadFolderPath = "~/Uploads/";
protected void FileUploadComplete(object sender, AjaxFileUploadEventArgs e)
{
    string fileName = Path.GetFileName(e.FileName);
    AjaxFileUpload1.SaveAs(Server.MapPath("~/Uploads/" + fileName));
}

VB.Net

Protected Sub FileUploadComplete(ByVal sender As Object, ByVal e As AjaxFileUploadEventArgs)
    Dim filename As String = Path.GetFileName(e.FileName)
    AjaxFileUpload1.SaveAs(Server.MapPath("~/Uploads/") + filename)
End Sub

Screenshot