IE jquery async file pending request

Question

I created a new drag and drop download control with a progress bar. It works great with all browsers, except for problems with IE 10 and above.

When I upload files to IE, most jquery async queries will not complete. He shows up waiting. I see that it is pending in the debug window of the IE network. But in all other browsers, it works well. I do not know what is wrong here. At first, I thought it could be related to caching. But after adding the server response options below. He is still waiting

context.Response.AppendHeader("Cache-Control", "no-cache"); // HTTP 1.1 context.Response.AppendHeader("Pragma", "no-cache"); // HTTP 1.1 

 for (var i = 0; i < files.length; i++) { var data = new FormData(); data.append(files[i].name, files[i]); uploadFile(handlerurl, data); } function uploadFile(handlerurl, formData) { var jqXHR = $.ajax({ type: 'POST', url: handlerurl, contentType: false, processData: false, async: true, cache: false, data: formData, xhr: function () { }, success: function (result, status, xhr) { }, error: function (xhr, status, error) { } }); } 

I call this function for each file. I am not sure what is wrong with IE.

Edit: After debugging, it turned out that the server breakpoint would hit. but there are no files in context.Request.Files . No files are sent from jquery / AJAX. You can reproduce this problem by continuing to download the same file again and again.

Answer 1

Problem

When searching for file upload options via ajax and without publishing the entire form, we often come across code on the Internet using the FormData API, which works fine on chrome and mozilla, but not on IE.

Decision

So the idea is to indicate the purpose of the form on an iframe and even associate the load event with an iframe so that you know when the load is complete and write additional jquery functions. You can also hide the iframe and not show the user. But this solution also works with IE. Code below

The code also shows how to send additional data along with the file message.

 @{ ViewBag.Title = "Index"; } <script src="~/scripts/jquery-1.9.1.min_.js"></script> <script type="text/javascript"> function successFunction() { alert($('#my_iframe').contents().find('p').html()); } function redirect() { //debugger; document.getElementById('my_form').target = 'my_iframe'; //'my_iframe' is the name of the iframe //document.getElementById('my_form').submit(); var callback = function () { if (successFunction) successFunction(); $('#frame').unbind('load', callback); }; $('#my_iframe').bind('load', callback); $('#hfParam').val('id:1'); $('#my_form').submit(); //$("#my_form").trigger("submit"); } </script> <h2>Index</h2> <input type="button" name="action" value="Upload" onclick="redirect();"/> <form id="my_form" name="my_form" action="/FileUpload/UploadFile" method="POST" enctype="multipart/form-data" > <div id="main"> <input name="my_hidden" id="hfParam" type="hidden" /> <input name="my_files" id="my_file" type="file" /> <iframe id='my_iframe' name='my_iframe' src=""> </iframe> <div id="someDiv"></div> </div> </form> [HttpPost] public ActionResult UploadFile() { ContentResult result = new ContentResult() { Content = "<p></p>", ContentType = "text/html"}; HttpPostedFileBase postedFile = Request.Files[0]; try { result.Content = "<p>" + postedFile.FileName + "</p>"; } catch (System.Exception ex) { result.Content = ex.Message; } return result; } 

From: http://kaushikghosh12.blogspot.com/2014/02/ajax-fileupload-on-all-browsers.html

Answer 2

Have you tried passing the Absolute URL for handlerUrl?

If your code is written in a standalone js file, an absolute URL can help even if the code is written in html, and then pass the correct relative URL.

Answer 3

IE Doesn't support loading an AJAX file the way you want it to work. Best scenario, you can provide a flash backup.

Answer 4

You can fill in an iframe, and then attach and place your images using this iframe. It will place your image simply, but it will look like you posted using ajax.

Answer 5

We use https://blueimp.imtqy.com/jQuery-File-Upload/ works fine on IE, of course, when you get in IE8-9, then you can not completely drag or even partially support Drag'n Drop, but it IE

 fileUpload.fileupload({ autoUpload: false, dataType: 'json', url: url, uploadTemplateId: null, downloadTemplateId: null, filesContainer: $('.x-table-uploaded-files tbody'), uploadTemplate: function (o) { ... aso 

the best of all users that I have ever contacted. (sorry for the incomplete source, work, can not share much: /)

  [HttpPost] public JsonResult Upload(IEnumerable<HttpPostedFileBase> files, int CId) { UploadResult result = cf.Handle(files, CId); result.ErrorCount = result.files.Count; if (result.files.Count > 100) { result.files = new List<FileErrorResults>(); } return Json(result, JsonRequestBehavior.AllowGet); } 

This example is an automatic file drag and drop parser that discards real-time results after analysis and produces file errors while the user drags the rest of its files. Supports IE10 and higher, of course, with IE8-9 you need to click and select files instead of dragging and dropping, but I think that it’s enough punishment that they use IE.

However, I tried to find a Google solution for ya, it seems that there were a lot of errors in the IE command list for loading pending problems, which the files in many scripts just get stuck. This is a dangerous platform.