Intermittent AJAX file upload failure in IE11 - F12 tools show "Pending..." indefinitely
Question
I'm adding a file upload feature to an SPA application. The file uploads work flawlessly in the latest versions of Chrome and Firefox, but IE 11 intermittently (maybe 5%-10% of the time) fails to execute the XHR request. Inspecting the request with the F12 tools doesn't provide much useful information:
The request stays in this "pending" state indefinitely.
Here's how I'm triggering the file upload (using jQuery):
function uploadFile() {
var formData = new FormData();
// filesToUpload is an Array<File>
formData.append('file', filesToUpload[0]);
$.ajax({
type: 'POST',
url: 'api/testupload',
data: formData,
contentType: false,
processData: false,
success: function() { ... },
error: function() { ... }
});
}
I've noticed this usually happens after letting the page site idle for at least a few minutes.
Once one POST upload request fails, all subsequent POST upload requests fail. However, if I execute a GET request after a failed POST , subsequent POST s usually work. If I let the failed POST s build up, the browser becomes unresponsive (usually happens after six or seven "pending" POST requests).
What could be causing this intermittent failure? Would switching to an <iframe> upload solve this issue? Is it possible this is problem is related to the network? Or how the server is responding? Or how I'm configuring and executing my request?
EDIT:
Here's the relevant parts of my document's <head> :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragme" content="no-cache" />
</head>
EDIT: (again)
Using Wireshark , I'm able to see that the POST request with the file is being sent.
2 answers
solution1
1 2015-10-27 19:34:12
I had a similar problem and the solution was to force the use of the older iframe file upload method.
My specific case: Using jquery file upload plugin (blueimp) on an application with SSO on IE11 results in PUT requests getting stuck in a pending state. If I log into my application without using SSO then ajax file upload works flawlessly. Also, like your situation, using a GET requests seems to refresh things and allow the next PUT file upload request to work. The fixed setting within this plugin is forceIframeTransport: true .
solution2
0 2017-04-28 12:03:37
I had the same issue. SetTimeout mentioned in one of the comments above didn't help. The only way I could make it work was to use both cache: false and a GET request to a fake action after the failed POST. I was uploading the file sequentially, so it wasn't really possible to build up more than 1 failed POST. One thing to mention - the first failing POST didn't ever return an error, I could only catch is using a timeout. Here's the code for GET I used:
function reuploadChunk(fileNo, chunkNo) {
$.ajax({
url: "../SomeController/FakeAction/",
type: 'GET',
cache: false,
success: function () {
uploadChunk(fileNo, chunkNo);
},
error: function () {
setTimeout(reuploadChunk(fileNo, chunkNo), 1000);
}
});
}
It's more of a workaround than a solution, but the good thing is people will soon move to Win10, so IE11 won't be a problem anymore.
NeatUpload seems to work in IE11 if you'd like to use a library, but it's super old, so I wouldn't really recommend it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.