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>");
  7. }
  9. function StartUpload(sender,args){
  10. document.getElementById('lblStatus').innerText = 'Uploading Started.';
  11. }
  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";
  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. }
  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>
  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. }