Javascript IE 8/9 中 FormData 的回退

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10852446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 03:14:00  来源:igfitidea点击:

Fallback for FormData in IE 8/9

javascriptajaxxmlhttprequestfileapi

提问by Mike Fielden

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

FormData在 IE 8/9 中不存在,但我需要这些浏览器中的功能。这有一个很好的回退吗?

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 formDatain modern browsers and just submit an XHRrequest. Because FormDatadoes not exist in IE 8/9 this obviously fails.

我会尝试发送 json 数据,但我需要将文件传递给服务器。我将此文件附加到formData现代浏览器中,然后提交XHR请求。因为FormData在 IE 8/9 中不存在,这显然失败了。

// 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?

也许另一种方法是在 js 中创建一个假表单对象,然后将数据附加到它?

回答by Dmitry Polushkin

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.formplugin that support XHR DataForm and iframe (data sends with iframe when browser do not FormData API support).

我只知道一种可能的解决方案,但对于 IE 来说,这并不是真正的 1-1 后备。没有用于发送文件的可能的通信 API,因为您无法在旧浏览器中绑定输入字段,就像在使用 FormData 的现代浏览器中一样。但是您可以使用 iframe 发送整个表单。对于这种情况,您可以使用支持 XHR DataForm 和 iframe 的jquery.form插件(当浏览器不支持 FormData API 时,数据与 iframe 一起发送)。

回答by 99 Problems - Syntax ain't one

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

您可以使用的XMLHttpRequest手动发送的文件中,有大量的信息在这个位置

You could test if the browser can use the FormDataobject first with:

您可以测试浏览器是否可以FormData首先使用该对象:

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

MDN has a this functionwhich you could modify for the fallback:

MDN 有一个这个函数,你可以修改它以进行后备:

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, '+');

回答by Jade Steffen

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

这个答案并没有严格解决您提出的问题,因此我理解 Mods 是否会删除它。

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?

但是,您的问题与我正在研究的一个问题密切相关,即如何通过 FormData() 为旧浏览器提供优雅降级的拖放上传

There is a wonderful library called dropzone.jswhich 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.

有一个很棒的库叫做dropzone.js,它为我的问题提供了完美的解决方案。也许最好的部分是该库提供了开箱即用的优雅降级以支持旧浏览器上的文件上传,详情见此处

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.

幸运的是,如果浏览器不受支持,dropzone.js 库会显示一个可自定义的回退类,其中包含一个输入字段和一个提交按钮。

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

我希望这些信息可以帮助像我一样正在寻找一种易于实现且优雅的文件上传解决方案的人。