用jQuery.ajax发送multipart / formdata

我有一个问题，使用jQuery的ajax函数发送文件到服务器端的PHP脚本。 可以用$('#fileinput').attr('files')获得文件列表，但是如何将这个数据发送到服务器呢？ 使用文件input时，服务器端php脚本的结果数组（ $_POST ）为0（ NULL ）。

我知道这是可能的（尽pipe直到现在我还没有find任何jQuery解决scheme，只有Prototye代码（ http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html ） ）。

这似乎是比较新的，所以请不要提到file upload将不可能通过XHR / Ajax，因为它肯定是工作。

我需要在Safari 5中的function，FF和Chrome会很好，但不是必需的。

我现在的代码是： 

 $.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类： 

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

所以现在你有一个FormData对象，准备和XMLHttpRequest一起发送。 

 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头，否则，边界string将会被丢失。 此外，您必须将processData标志设置为false，否则，jQuery将尝试将您的FormData转换为string，这将失败。

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

 $_FILES['file-0']

（只有一个文件， file-0 ，除非在文件input中指定了multiple属性，在这种情况下，数字将随每个文件而递增。）

对旧版浏览器使用FormData模拟 

 var opts = { 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); } }; if(data.fake) { // Make sure no text encoding stuff is done by xhr opts.xhr = function() { var xhr = jQuery.ajaxSettings.xhr(); xhr.send = xhr.sendAsBinary; return xhr; } opts.contentType = "multipart/form-data; boundary="+data.boundary; opts.data = data.toString(); } jQuery.ajax(opts);

从现有的表单创buildFormData

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

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

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

只要命名您的文件元素相同，并在括号中结束名称： 

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

$_FILES['file']将成为一个数组，其中包含上传的每个文件的file upload字段。 实际上，我推荐使用最初的解决scheme，因为迭代更简单。

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

像使用.serialize()一样使用它，而不是把.serializefiles(); 。
在我的testing中在这里工作。 

 //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);

只是想添加一点拉斐尔的伟大答案。 无论您是否使用JavaScript进行提交，以下是如何让PHP生成相同的$_FILES 。

HTML表单： 

 <form enctype="multipart/form-data" action="/test.php" method="post" class="putImages"> <input name="media[]" type="file" multiple/> <input class="button" type="submit" alt="Upload" value="Upload" /> </form>

PHP在没有JavaScript的情况下提供了这个$_FILES ： 

 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 ) ) )

如果你做渐进增强，使用拉斐尔的JS提交文件… 

 var data = new FormData($('input[name^="media"]')); jQuery.each($('input[name^="media"]')[0].files, function(i, file) { data.append(i, file); }); $.ajax({ type: ppiFormMethod, data: data, url: ppiFormActionURL, cache: false, contentType: false, processData: false, success: function(data){ alert(data); } });

…这是什么PHP的$_FILES数组看起来像，使用该JavaScript提交后： 

 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是有用的，不pipe是否使用了JavaScript。 所以，这里是JS的一些小的改变： 

 // 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中修复了这个代码。）

该代码有两件事。

  1. 自动检索input名称属性，使HTML更易于维护。 现在，只要form有putImages类，其他一切都会自动处理。 也就是说， input不需要有任何特殊的名字。
  2. 正常HTML提交的数组格式是由data.append行中的JavaScript重新创build的。 请注意括号。

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

看看我的代码，它为我做的工作 

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

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

 $('#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（）。

这让我到这个:(用你的jQueryselect器replaceformSelector） 

 $(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中（至less在iPhone上），我无法使用Raphael Schweikert的解决scheme。

Mozilla Dev 在操作FormData对象上有一个不错的页面。

所以，在页面的某个地方添加一个空的表单，指定enctype： 

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

然后，创buildFormData对象为： 

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

并按照Raphael的代码进行 。

我今天碰到一个问题，我认为值得指出与这个问题有关：如果ajax调用的url被redirect，那么content-type：'multipart / form-data'的头部可能会丢失。

例如，我发布到http://server.com/context?param=x

在Chrome的networking选项卡中，我看到了这个请求的正确的多部分头，然后302redirect到http://server.com/context/?param=x （注意上下文之后的斜杠）

在redirect期间，多部分头部丢失。 如果这些解决scheme不适合您，请确保请求不被redirect。

  1. 通过jquery-> $（“＃id”）[0]获取表单对象
  2. data = new FormData（$（“＃id”）[0]）;
  3. 好的，数据是你想要的

作为AJAX的替代scheme，您可以在文档中添加隐藏的iframe，将表单复制并发布（以便在可见页面中不发生redirect）。 我想你可以在之后删除iframe。

（HTML和JS是黑客技术，而不是程序员，你不得不破解你的出路……上帝知道补丁和“演化”JS和HTML多less年了，你仍然可以“如果不使用外部库文件，就做这么简单的工作，我感到厌倦了（我知道HTML5是不够的，也没有得到广泛的支持））

    Interesting Posts

    FormData.append（“key”，“value”）不起作用

    通过JQuery AJAX一起发送FormData和String数据？

    将数组附加到FormData并通过AJAX发送

    Node.JS：如何使用请求模块发送表单数据头

    IE8 / 9中的FormData