javascript - Fallback for FormData in IE 89 - Stack Overflow

admin管理员组

文章数量:1182738

FormData does not exist in IE 8/9 but I need that functionality in those browsers. Is there a nice fallback for this?

I would try to send over json data, but I need to pass over a file to the server. I append this file to the formData in modern browsers and just submit an XHR request. Because FormData does not exist in IE 8/9 this obviously fails.

// I cant seem to get this to work with a file.
$.ajax({
    url: '/genericHandlers/UploadDocsFile.ashx',
    type: "POST",
    data: model.toJSON(),
    contentType: 'application/json'
    }).done(function  (data) { 
       log('stuff happened!');
    });

Maybe an alternative is to create a fake form object in js then append the data to that?

FormData does not exist in IE 8/9 but I need that functionality in those browsers. Is there a nice fallback for this?

I would try to send over json data, but I need to pass over a file to the server. I append this file to the formData in modern browsers and just submit an XHR request. Because FormData does not exist in IE 8/9 this obviously fails.

// I cant seem to get this to work with a file.
$.ajax({
    url: '/genericHandlers/UploadDocsFile.ashx',
    type: "POST",
    data: model.toJSON(),
    contentType: 'application/json'
    }).done(function  (data) { 
       log('stuff happened!');
    });

Maybe an alternative is to create a fake form object in js then append the data to that?

• javascript
• ajax
• xmlhttprequest
• fileapi

Share Improve this question Follow asked Jun 1, 2012 at 14:45 Mike FieldenMike Fielden 10.2k1414 gold badges6060 silver badges100100 bronze badges 2

• 5 Would love a polyfill for the window.FormData method. – Ash Blue Commented May 30, 2013 at 23:09
• Then i present to you a new FormData polyfill Still depend on constructing blobs unfortunately... Maybe you can use this also: Blob.js. To read a file you would need flash – Endless Commented Oct 20, 2016 at 8:12

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 8

I know only one possible solution, but it's not really 1-1 fallback for IEs. There are no possible communication API for sending files, because you cannot bind input fields in old browsers, like in a modern ones using FormData. But you can send whole form using an iframe. For this case you can use jquery.form plugin that support XHR DataForm and iframe (data sends with iframe when browser do not FormData API support).

You can send the file manually using XMLHttpRequests, there is lots of information on this here.

You could test if the browser can use the FormData object first with:

if(typeof FormData !== 'undefined')
   ...

MDN has a this function which you could modify for the fallback:

var XHR = new XMLHttpRequest();
var urlEncodedData = "";
var urlEncodedDataPairs = [];
var name;

// We turn the data object into an array of URL encoded key value pairs.
for(name in data) {
  urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}

// We combine the pairs into a single string and replace all encoded spaces to 
// the plus character to match the behaviour of the web browser form submit.
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

This answer does not strictly address the question you asked, and for that reason I understand if Mods will remove it.

However, your question was closely related to an issue I was researching which is how to offer drag and drop uploads via FormData() with graceful degradation for older browsers?

There is a wonderful library called dropzone.js which offers a perfect solution to my problem. Perhaps the best part is that the library offers out-of-the-box graceful degradation to support file uploads on older browsers, as detailed here.

To paraphrase the source:

Fortunately if the browser is not supported, the dropzone.js library shows a customizable fallback class that contains an input field and a submit button.

I hope this information helps someone who is, like me, searching for a simple to implement and elegant solution for file uploads.

本文标签： javascriptFallback for FormData in IE 89Stack Overflow