How to upload a file via jquery ajax and c #

Question

I want to upload a file using jQuery Ajax web method, but it does not work.

Here is my jQuery ajax web method call:

function GenerateExcel() { var ResultTable = jQuery('<div/>').append(jQuery('<table/>').append($('.hDivBox').find('thead').clone()).append($('.bDiv').find('tbody').clone())); var list = [$(ResultTable).html()]; var jsonText = JSON.stringify({ list: list }); $.ajax({ type: "POST", url: "GenerateMatrix.aspx/GenerateExcel", data: jsonText, contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { }, failure: function (response) { alert(response.d); } }); } 

and this is the definition of the web method:

 [System.Web.Services.WebMethod()] public static string GenerateExcel(List<string> list) { HttpContext.Current.Response.AppendHeader("content-disposition", "attachment;filename=FileEName.xls"); HttpContext.Current.Response.Charset = ""; HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache); HttpContext.Current.Response.ContentType = "application/vnd.ms-excel"; HttpContext.Current.Response.Write(list[0]); HttpContext.Current.Response.End(); return ""; } 

How to do it? Please help me.
One more thing: I want to download it to the client PC, and not save it to the server.

Answer 1

Well, I did it with an iframe

this is a modified ajax function call

  function GenerateExcel() { var ResultTable = jQuery('<div/>').append(jQuery('<table/>').append($('.hDivBox').find('thead').clone()).append($('.bDiv').find('tbody').clone())); var list = [$(ResultTable).html()]; var jsonText = JSON.stringify({ list: list }); $.ajax({ type: "POST", url: "GenerateMatrix.aspx/GenerateExcel", data: jsonText, contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { if (isNaN(response.d) == false) { $('#iframe').attr('src', 'GenerateMatrix.aspx?ExcelReportId=' + response.d); $('#iframe').load(); } else { alert(response.d); } }, failure: function (response) { alert(response.d); } }); } 

and this is the constructive part

  <iframe id="iframe" style="display:none;"></iframe> 

on page loading my code is as follows

  Response.AppendHeader("content-disposition", "attachment;filename=FileEName.xls"); Response.Charset = ""; Response.Cache.SetCacheability(HttpCacheability.NoCache); Response.ContentType = "application/vnd.ms-excel"; Response.Write(tableHtml); Response.End(); 

Answer 2

• Add them to the watch page -

   <iframe id="iframe" style="display:none;"></iframe> <button id="download_file">Download</button> 

• Server side

   public string Download(string file) { string filePath = Server.MapPath(System.Configuration.ConfigurationManager.AppSettings["FileManagementPath"]); string actualFilePath = System.IO.Path.Combine(filePath, file); HttpContext.Response.ContentType = "APPLICATION/OCTET-STREAM"; string filename = Path.GetFileName(actualFilePath); String Header = "Attachment; Filename=" + filename; HttpContext.Response.AppendHeader("Content-Disposition", Header); HttpContext.Response.WriteFile(actualFilePath); HttpContext.Response.End(); return ""; } 

• Add this code to your JavaScript

   <script> $('#download_file').click(function(){ var path = 'e-payment_format.pdf';//name of the file $("#iframe").attr("src", "/FileCabinet/Download?file=" + path); }); </script> 

That should work!

Answer 3

Assuming the C # code is responding with the correct headers for Excel, you can just redirect the link, rather than using ajax:

 var list = [$(ResultTable).html()]; var url = "GenerateMatrix.aspx/GenerateExcel"; var data = {list: list}; url += '?' + decodeURIComponent($.param(data)); // if url is an excel file, the browser will handle it (should show a download dialog) window.location = url;