Post
Ask Question

File Upload control using Ajax and javascript in asp.net

How to Make File upload using Ajax control in asp.net

Javascript file
  1. <script type="text/javascript" language="javascript">  
  2. function uploadError(sender,args){  
  3.     document.getElementById('lblStatus').innerText = args.get_fileName(),   
  4.     "<span style='color:red;'>" + args.get_errorMessage() + "</span>";  
  5.     addToClientTable(args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>");    
  6.   
  7. }  
  8.   
  9. function StartUpload(sender,args){  
  10.     document.getElementById('lblStatus').innerText = 'Uploading Started.';  
  11. }  
  12.   
  13. function UploadComplete(sender,args){  
  14.     var filename = args.get_fileName();  
  15.     var contentType = args.get_contentType();  
  16.     var text = "Size of " + filename + " is " + args.get_length() + " bytes";  
  17.   
  18.     if (contentType.length > 0)  
  19.     {  
  20.         text += " and content type is '" + contentType + "'.";  
  21.     }  
  22.     document.getElementById('lblfilename').innerText = filename;  
  23.     document.getElementById('lblStatus').innerText = text;  
  24.     addToClientTable(args.get_fileName(), text);   
  25. }  
  26.   
  27. function fillCell(row, cellNumber, text) {    
  28.     var cell = row.insertCell(cellNumber);    
  29.     cell.innerHTML = text;    
  30.     cellcell.style.borderBottom = cell.style.borderRight = "solid 1px #aaaaff";    
  31. }    
  32. function addToClientTable(name, text) {    
  33.     var table = document.getElementById("<%= clientSide.ClientID %>");    
  34.     var row = table.insertRow(0);    
  35.     fillCell(row, 0, name);    
  36.     fillCell(row, 1, text);    
  37. }  
  38. </script>  

Design page
  1. <asp:ScriptManager ID="scman" runat="server"></asp:ScriptManager>  
  2.   
  3. <asp:UpdatePanel ID="update1" runat="server">  
  4. <ContentTemplate>  
  5.     <AjaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="uploadError"  
  6.         OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" CompleteBackColor="Lime"  
  7.         UploaderStyle="Modern" ErrorBackColor="Red" ThrobberID="Throbber" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"  
  8.         UploadingBackColor="#66CCFF" />  
  9.     <br />  
  10.     <asp:Label ID="Throbber" runat="server" Style="display: none" Font-Bold="true">  
  11.         <img src="images/indicator-new.gif" align="absmiddle" alt="loading" />  
  12.     </asp:Label>  
  13.     <asp:Label ID="lblfilename" runat="server" Style="font-family: Arial; color:Green; font-size: small;"></asp:Label>  
  14.     <br />  
  15.     <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>  
  16.     <table style="border-collapse: collapse; border-left: solid 1px #aaaaff; border-top: solid 1px #aaaaff;"  runat="server" cellpadding="3" id="clientSide" />  
  17. </ContentTemplate>  
  18. <Triggers>  
  19.     <asp:AsyncPostBackTrigger ControlID="AsyncFileUpload1" EventName="UploadedComplete" />  
  20.     </Triggers>  
  21. </asp:UpdatePanel>  

And Code behind page for file upload 
  1. protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)  
  2. {  
  3.     System.Threading.Thread.Sleep(1000);  
  4.     if (AsyncFileUpload1.HasFile)  
  5.     {  
  6.         string strPath = MapPath("~/Uploads/") + System.IO.Path.GetFileName(e.filename);  
  7.         AsyncFileUpload1.SaveAs(strPath);  
  8.     }  
  9. }