用JQuel.Ajax发送multipart/formdata

Sending multipart/formdata with jQuery.ajax

使用jquery的ajax函数向服务器端的php脚本发送文件时遇到问题。可以使用$('#fileinput').attr('files')获取文件列表，但如何将这些数据发送到服务器？使用文件输入时，服务器端php脚本上的结果数组($_POST为0(NULL)。

我知道这是可能的(尽管我到目前为止还没有找到任何jquery解决方案，但只有原型代码(http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html))。

这似乎是相对较新的，所以请不要提及通过XHR/AJAX上传文件是不可能的，因为它确实有效。

我需要Safari 5的功能，FF和Chrome很好，但不是必需的。

我现在的代码是：

1
2
3
4
5
6
7
8
9
10
11

$.ajax({
url: 'php/upload.php',
data: $('#file').attr('files'),
cache: false,
contentType: 'multipart/form-data',
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});

相关讨论

从Safari 5/firefox 4开始，最容易使用FormData类：

1
2
3
4

var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});

所以现在您有了一个FormData对象，可以和xmlhttprequest一起发送了。

1
2
3
4
5
6
7
8
9
10
11
12

jQuery.ajax({
url: 'php/upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST', // For jQuery < 1.9
success: function(data){
alert(data);
}
});

必须将contentType选项设置为false，强制jquery不为您添加Content-Type头，否则将丢失边界字符串。此外，您必须将processData标志设置为false，否则jquery将尝试将您的FormData转换为字符串，但这将失败。

现在可以使用以下方法在PHP中检索文件：

1	$_FILES['file-0']

(只有一个文件，file-0，除非您在文件输入上指定了multiple属性，在这种情况下，数字将随每个文件递增。)

对旧浏览器使用FormData仿真

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

从现有表单创建FormData

也可以使用现有表单对象的内容创建FormData对象，而不是手动迭代文件：

1	var data = new FormData(jQuery('form')[0]);

使用PHP本机数组而不是计数器

只需将文件元素命名为相同，并在括号内结束名称：

1
2
3

jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file[]', file);
});

EDOCX1×9将是一个包含文件上传字段的数组，用于上传的每个文件。事实上，我在最初的解决方案中推荐了这一点，因为迭代过程比较简单。

相关讨论

此外，还有一个formdata仿真，它将使把这个解决方案移植到旧的浏览器变得非常简单。您所要做的就是检查data.fake并手动设置contentType属性，以及重写xhr以使用sendAsBinary()属性。
嗨@raphael schwekert，我们试过了，但似乎没用(stackoverflow.com/questions/10215425/&hellip；)。在哪里设置多部分/表单数据的边界？
你能详细解释一下"似乎不管用"吗？你到底试过什么？FormData仿真还是本地类？在使用仿真时，边界在data.boundary中，因此您可以将xhr: function() { var xhr = jQuery.ajaxSettings.xhr(); xhr.send = xhr.sendAsBinary; return xhr; },添加到选项中，并将"multipart/form-data; boundary="+data.boundary用于contentType选项。
是的，抱歉含糊不清。下面是我们尝试的代码：stackoverflow.com/questions/10220576/&hellip；
所以你既不使用jQuery类，也不使用FormData类，而是在jquery特有的问题和使用formdata特有的答案的上下文中问我？对不起，我想我不能帮你…
抱歉@raphael，该版本没有我们的jquery尝试与formdata结合使用。我们将创建一个处理该代码的JSD。对不起！
@Raphaelschweikert我成功地将您的方法用于/colums/add-situation。我现在陷入了/Albums/：id/编辑状态。你能给点建议吗？stackoverflow.com/questions/12811287/&hellip；
+1这是该问题的解决方案。但这在不支持表单数据但支持Ajax上传的火狐3.6上不起作用，即使使用手动发送技巧头！！
使用application/x-www-form-urlencoded。有没有办法用multipart/form-data代替？
@timmm不，它使用multipart/form-data。使用application/x-www-form-urlencoded是行不通的。
关于EDCOX1，14：API中的哪一个？我看不出它是怎么回事。(别误会我的意思——它只是在错误的时候工作——我只是不知道它在哪里)
RoyiNamir，恐怕只在代码中有记录。
也许应该省略cache选项(参见api.jquery.com/jquery.ajax)："将缓存设置为false只能正确地处理head和get请求。它通过在GET参数上附加_={timestamp}来工作。对于其他类型的请求，不需要该参数，除非在IE8中，当对已经由get请求的URL进行投递时。"
@杰克更准确地说，缓存选项可以省略。它不应该有任何区别(除了IE，我不知道它是否有帮助)。
你解决了我的"非法调用异常"谢谢！！！！
@拉斐尔·施韦克特，如果我回音埃多克斯1(17)，作为一个输出我应该得到什么？
@HogRider是一个包含以下字段的数组：名称、类型、tmp_名称、错误、大小。请参见php.net/manual/en/features.file-upload.php
@Raphaelschweikert Stackoverflow.com/questions/29622293/&Hellip；Can you check it
@Royinamir：The official docs have since been amended："As of Jquery 1.6 You can pass false to tell Jquery to not set any content type header."
@Raphaelschweikert doesn t jquery('35；file')[0].files throw an mistake in older browsers like IE9 which does not support the files property？
@Sharathchandra the question was specifically about how to post files for browsers that do support the file API.但不是，不是错误，是Thrown，它只是回来的EDOCX1但是，是的，Neither the Native EDOCX1 commercial 1 commercial solution nor the EDOCX1 commercial 1 commercial emulation works on browsers that don't support the file API.You'll have to use other kinds of fallbacks for these browsers(EDOCX1 English 3，Flash，Activiex).
@Raphaelschweikert thanks for the clarification.
@Timmmm maybe you forgot the EDOCX1 sympleum 4 part.
Thank you for your complete answer.Why did't anyone mention that the'[…]characters here->data.append(` file'，file)；"is very important！不！我只是不小心救了我的一天！
Took me a moment，this is the selector for all file inputs:("input[type=` file']")[0].
如果你需要整理前数据领域的内容类型，你可以使用博客分类：EDOCX1字体5。
哦，上帝的清酒，这真的发生了吗？Brilliant Api，Jquery！
According to canius.com/.35；search=formdata this solution has 94.7%global support over browsers(weighted by usage).
"Also，you must leave the processdata flag set to fals，otherwise，Jquery will try to turn your form data into a string"-No.Setting it to fals is exactly why formdata is transformed to a string.a Multipart/form-data one to be exact.

只是想给拉斐尔的一个伟大的答案加一点。下面是如何让PHP产生相同的EDCOX1×10，而不管您是否使用JavaScript提交。

HTML表单：

1
2
3
4
5

当不使用javascript提交时，php生成此$_FILES：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Array
(
[media] => Array
(
[name] => Array
(
[0] => Galata_Tower.jpg
[1] => 518f.jpg
)

[type] => Array
(
[0] => image/jpeg
[1] => image/jpeg
)

[tmp_name] => Array
(
[0] => /tmp/phpIQaOYo
[1] => /tmp/phpJQaOYo
)

[error] => Array
(
[0] => 0
[1] => 0
)

[size] => Array
(
[0] => 258004
[1] => 127884
)

)

)

如果您进行渐进式增强，使用Raphael的JS提交文件…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

…这就是PHP的$_FILES数组在使用javascript提交之后的样子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Array
(
[0] => Array
(
[name] => Galata_Tower.jpg
[type] => image/jpeg
[tmp_name] => /tmp/phpAQaOYo
[error] => 0
[size] => 258004
)

[1] => Array
(
[name] => 518f.jpg
[type] => image/jpeg
[tmp_name] => /tmp/phpBQaOYo
[error] => 0
[size] => 127884
)

)

这是一个很好的数组，实际上有些人把$_FILES转换成了什么，但是我发现使用相同的$_FILES是很有用的，不管是否使用了javascript提交。所以，下面是对JS的一些小改动：

1
2
3
4
5
6
7
8
9
10

// match anything not a [ or ]
regexp = /^[^[\]]+/;
var fileInput = $('.putImages input[type="file"]');
var fileInputName = regexp.exec( fileInput.attr('name') );

// make files available
var data = new FormData();
jQuery.each($(fileInput)[0].files, function(i, file) {
data.append(fileInputName+'['+i+']', file);
});

(2017年4月14日编辑：我从formdata()的构造函数中删除了表单元素——这在Safari中修复了此代码。)

这个代码有两个作用。

自动检索inputname属性，使HTML更易于维护。现在，只要form有了类putimages，其他的一切都会自动处理。也就是说，input不需要有任何特殊的名称。

普通HTML提交的数组格式由data.append行中的javascript重新创建。注意括号。

通过这些更改，用javascript提交现在可以生成与用简单HTML提交完全相同的$_FILES数组。

相关讨论

我只是根据我读到的一些信息构建了这个函数。

使用它就像使用.serialize()一样，只需放入.serializefiles();即可。
在我的测试中工作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//USAGE: $("#form").serializefiles();
(function($) {
$.fn.serializefiles = function() {
var obj = $(this);
/* ADD FILE TO PARAM AJAX */
var formData = new FormData();
$.each($(obj).find("input[type='file']"), function(i, tag) {
$.each($(tag)[0].files, function(i, file) {
formData.append(tag.name, file);
});
});
var params = $(obj).serializeArray();
$.each(params, function (i, val) {
formData.append(val.name, val.value);
});
return formData;
};
})(jQuery);

相关讨论

看看我的代码，它为我完成了任务

1
2
3
4
5
6
7
8
9
10
11

$( '#formId' )
.submit( function( e ) {
$.ajax( {
url: 'FormSubmitUrl',
type: 'POST',
data: new FormData( this ),
processData: false,
contentType: false
} );
e.preventDefault();
} );

如果表单是在HTML中定义的，那么将表单传递到构造函数比迭代和添加图像更容易。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$('#my-form').submit( function(e) {
e.preventDefault();

var data = new FormData(this); // <-- 'this' is your form element

$.ajax({
url: '/my_URL/',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
...

Devin Venable的回答接近我想要的，但我想要一个可以处理多个表单的答案，并使用表单中已经指定的操作，以便每个文件都可以放到正确的位置。

我还想使用jquery的on()方法，这样可以避免使用.ready()。

这让我明白了：(用jQuery选择器替换FultS选择器)

1
2
3
4
5
6
7
8
9
10
11
12
13

$(document).on('submit', formSelecter, function( e ) {
e.preventDefault();
$.ajax( {
url: $(this).attr('action'),
type: 'POST',
data: new FormData( this ),
processData: false,
contentType: false
}).done(function( data ) {
//do stuff with the data you got back.
});

});

formdata类确实有效，但是在iOS Safari(至少在iPhone上)中，我不能像现在一样使用Raphael Schweikert的解决方案。

Mozilla Dev有一个关于操作FormData对象的好页面。

因此，在页面的某个位置添加一个空表单，指定enctype:

1	<form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo"></form>

然后，将FormData对象创建为：

1	var data = new FormData($("#fileinfo"));

按照拉斐尔的法典进行。

相关讨论

nova days您甚至不需要jquery:)获取api支持表

1	let result = fetch('url', {method: 'POST', body: new FormData(documemt.querySelector("#form"))})

相关讨论

上面所有的解决方案看起来都很好和优雅，但是formData()对象不需要任何参数，而是在实例化之后使用append()，就像上面写的那样：

formdata.append(val.name，val.value)；

旧版本的IE不支持FormData(完整的FormData浏览器支持列表如下：https://developer.mozilla.org/en-us/docs/web/api/formdata)。

您可以使用jquery插件(例如，http://malsup.com/jquery/form/代码示例)，也可以使用基于iframe的解决方案通过ajax发布多部分表单数据：https://developer.mozilla.org/en-us/docs/learn/html/forms/sending_forms_through_javascript

我今天遇到的一个问题是值得指出的，与这个问题相关的：如果Ajax调用的URL被重定向，那么内容类型"multipart/form data"的头可能会丢失。

例如，我在发布到http://server.com/context？PARAM= X

在chrome的"网络"选项卡中，我看到了此请求的正确多部分头，但随后302重定向到http://server.com/context/？param=x(注意上下文后面的斜线)

重定向期间，多部分头丢失。如果这些解决方案对您不起作用，请确保不会重定向请求。

通过jquery->$获取表单对象("id")[0]

数据=新表单数据($(id")[0])；

好的，数据是你想要的

相关讨论