JQuery Ajax Form with file upload not working in IE

Question

I use Jquery Ajax Form to upload files, which works well in Chrome and Firefox, but it does not work in IE. A window appears saying that I want to save the file that I am trying to download.

Some example of my code, if necessary, is a ritual here: HTML:

<div class="addNewDocumentContent"> <form id="AddNewDocForm" action="@Url.Action("AddNewDocument", "BidForm")" enctype="multipart/form-data" method="post"> <div> <input name="File" type="file" style="width: 80%;" /> </div> <div> <label> @Labels.Name</label> <input type="text" name="Name" style="width: 80%;" /> </div> <div style="text-align: right;"> <button type="button" name="Back" value="Back"> @Buttons.GoBack </button> <button type="submit" name="Add" value="Back"> @Buttons.Add </button> </div> </form> 

JS:

 //Document Ready============================================================================= $(function () { $('#AddNewDocForm').ajaxForm({ type: 'POST', beforeSubmit: function () { return $("#AddNewDocForm").valid(); }, success: function (documents) { FillDocuments(documents); $('#dialogAddNewDocument').dialog('close'); } }); }); //Validate==================================================================================== //Validation===================================================================================== $(function () { $("#AddNewDocForm").validate({ ignore: ":not(:visible)", rules: { File: "required", Name: "required" } }); }); //========================================================================================= 

Act

 [HttpPost] public JsonResult AddNewDocument(DocumentModel document) { if (ModelState.IsValid) { List<DocumentModel> documents = null; if (Session["Documents"] != null) { documents = (List<DocumentModel>)Session["Documents"]; var doc = documents.OrderByDescending(x => x.Number).Take(1).FirstOrDefault(); document.Number = doc != null ? doc.Number + 1 : 1; document.FileName = document.File != null ? document.File.FileName : document.FileName; documents.Add(document); } else { documents = new List<DocumentModel>(); document.Number = 1; document.FileName = document.File != null ? document.File.FileName : document.FileName; documents.Add(document); Session["Documents"] = documents; } var displaydocs = documents.Select(x => new { Name = x.Name, Number = x.Number, File = x.File != null ? x.File.FileName : x.FileName, Route = x.Route != null ? x.Route : "#", }); return Json(displaydocs, JsonRequestBehavior.AllowGet); } else { return null; } } 

and finally, the model:

  public class DocumentModel { public int Number { get; set; } [Required] public string Name { get; set; } [Required] public HttpPostedFileBase File { get; set; } public string FileName { get; set; } public string Route { get; set; } } 

Again, it works in every browser except IE8. I am probably not the only one, but I did not find the answer there.

Answer 1

I have not tried the text box yet, but it works fine if I define the type of content to return inside the action as text / html:

  return new JsonResult() { ContentType = "text/html", Data = result }; 

Answer 2

This question has been asked many times . Please do a search before posting. The documentation clearly states:

Browsers that support XMLHttpRequest Level 2 will be able to download files without problems and even receive updates as downloads continue. Older browsers use fallback technology, which includes iframes, because it is not possible to download files using the level 1 XMLHttpRequest object. This is a common back, but has its inherent limitations. The IFrame element is used as the goal of the form submission operation, which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but does not work if the Response Type is script or JSON, both of which often contain characters that must be represented using object references when found in HTML markup.

To take into account the script and JSON response problems when using in iframe mode, the form plugin allows you to include these answers in the textarea element, and it is recommended that you do this for these types of answers when used in conjunction with file upload and older browsers. Note, however, that if in the form, then the request uses the usual XHR to submit the form (not an IFrame). This puts a strain on your server code to know when to use the text box and when not.

Since you are returning JSON from your controller action, you need to respect what the documentation => wrap says in the <textarea> element.

Answer 3

Try adding a cache: "false" inside your AJAX call ... Something like:

  $.ajax({ type:"POST", url:'process.php', cache:'false', //IE FIX data: data, success: function(){ //on success do something... } });