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

Last Reply 10 months ago By pandeyism

Posted 10 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 10 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