使用 jQuery.ajax 发送 multipart/formdata

Posted 2023-03-10

技术标签:

【中文标题】使用 jQuery.ajax 发送 multipart/formdata【英文标题】：Sending multipart/formdata with jQuery.ajax 【发布时间】：2011-07-20 12:36:02 【问题描述】：

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

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

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

我需要 Safari 5、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);
    
);

【问题讨论】：

遗憾的是使用 FormData 对象在 IE 上不起作用 @GarciaWebDev 据说您可以使用带有 Flash 的 polyfill 来支持相同的 API。查看github.com/Modernizr/Modernizr/wiki/… 了解更多信息。可能duplicate. 您可以使用$(':file') 选择所有输入文件。就是简单一点。 @RameshwarVyevhare 该答案是在回答此问题五年后发布的。请不要为了宣传您自己的答案而提出类似的问题。 【参考方案1】：

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

您现在可以使用 PHP 检索文件：

$_FILES['file-0']

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

在旧版浏览器中使用 FormData emulation

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

从现有表单创建 FormData

除了手动迭代文件，还可以使用现有表单对象的内容创建 FormData 对象：

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

使用 PHP 原生数组代替计数器

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

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

$_FILES['file'] 将是一个数组，其中包含每个上传文件的文件上传字段。实际上，我推荐这个而不是我最初的解决方案，因为它更容易迭代。

【讨论】：

【参考方案2】：

只是想为 Raphael 的精彩回答添加一点内容。下面是如何让 PHP 生成相同的$_FILES，无论您是否使用 javascript 提交。

HTML 表单：

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

在没有 JavaScript 的情况下提交时，PHP 会生成此 $_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 很有用，无论是否使用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 中修复了此代码。）

这段代码做了两件事。

input

form

input

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

【讨论】：

【参考方案3】：

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

像使用 .serialize() 一样使用它，而不是直接输入 .serializefiles();。在我的测试中工作。

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

【讨论】：

我试图让它工作，但它似乎无法将 serializefiles() 识别为函数，尽管此定义位于页面顶部。这对我来说很好。使用var data = $("#avatar-form").serializefiles(); 获取数据，通过 ajax 数据参数发送此数据并使用 express 强大的分析：form.parse(req, function(err, fields, files) 谢谢你的代码 sn-p :)【参考方案4】：

FormData 类确实有效，但在 ios Safari 中（至少在 iPhone 上）我无法按原样使用 Raphael Schweikert 的解决方案。

Mozilla Dev 有一个不错的页面on manipulating FormData objects。

所以，在页面的某处添加一个空表单，指定编码类型：

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

然后，创建 FormData 对象为：

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

然后像Raphael's code一样继续。

【讨论】：

【参考方案5】：

通过jquery获取表单对象-> $("#id")[0] data = new FormData($("#id")[0]); 好的，数据是你想要的

【讨论】：

$("#id")[0] 返回表单的第一个空，你如何提交整个表单，包括所有吗？【参考方案6】：

如果您的表单是在 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)
            ...

【讨论】：

【参考方案7】：

看看我的代码，它对我有用

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

【讨论】：

【参考方案8】：

我今天遇到的一个问题，我认为值得指出与此问题相关的问题：如果 ajax 调用的 url 被重定向，那么 content-type: 'multipart/form-data' 的标头可能会丢失。

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

在 Chrome 的网络选项卡中，我看到了此请求的正确多部分标头，但随后 302 重定向到 http://server.com/context/?param=x（注意上下文后的斜杠）

在重定向期间，多部分标头丢失。如果这些解决方案不适合您，请确保不会重定向请求。

【讨论】：

【参考方案9】：

Devin Venable's answer 与我想要的很接近，但我想要一个可以在多个表单上工作的，并使用表单中已经指定的操作，以便每个文件都可以放在正确的位置。

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

这让我明白了：（用你的 jQuery 选择器替换 formSelector）

$(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.
    );

);

【讨论】：

【参考方案10】：

旧版本的 IE 不支持 FormData（FormData 的完整浏览器支持列表在这里：https://developer.mozilla.org/en-US/docs/Web/API/FormData）。

您可以使用 jquery 插件（例如，http://malsup.com/jquery/form/#code-samples）或者，您可以使用基于 IFrame 的解决方案通过 ajax 发布多部分表单数据：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript

【讨论】：

【参考方案11】：

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

formData.append(val.name, val.value);

【讨论】：

【参考方案12】：

现在你甚至不需要 jQuery:) fetch API support table

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

【讨论】：

【参考方案13】：

如果文件输入name 表示一个数组并标记multiple，并且您用FormData 解析整个form，则无需迭代append() 输入文件。 FormData 会自动处理多个文件。

$('#submit_1').on('click', function() 
  let data = new FormData($("#my_form")[0]);

  $.ajax(
    url: '/path/to/php_file',
    type: 'POST',
    data: data,
    processData: false,
    contentType: false,
    success: function(r) 
      console.log('success', r);
    ,
    error: function(r) 
      console.log('error', r);
    
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my_form">
  <input type="file" name="multi_img_file[]" id="multi_img_file" accept=".gif,.jpg,.jpeg,.png,.svg" multiple="multiple" />
  <button type="button" name="submit_1" id="submit_1">Not type='submit'</button>
</form>

请注意，使用的是常规 button type="button"，而不是 type="submit"。这表明不依赖于使用submit 来获得此功能。

在 Chrome 开发工具中生成的 $_FILES 条目如下所示：

multi_img_file:
  error: (2) [0, 0]
  name: (2) ["pic1.jpg", "pic2.jpg"]
  size: (2) [1978036, 2446180]
  tmp_name: (2) ["/tmp/phphnrdPz", "/tmp/phpBrGSZN"]
  type: (2) ["image/jpeg", "image/jpeg"]

注意：在某些情况下，某些图像在作为单个文件上传时可以正常上传，但在一组多个文件中上传时会失败。症状是 PHP 报告空的 $_POST 和 $_FILES 而没有 AJAX 抛出任何错误。 Chrome 75.0.3770.100 和 PHP 7.0 出现问题。在我的测试集中，似乎只有几十张图片中的一张会发生这种情况。

【讨论】：

以上是关于使用 jQuery.ajax 发送 multipart/formdata的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 jQuery $.ajax 将请求参数数组发送到 servlet？

使用 jQuery AJAX 发送多个数据参数

RoR：发送附加数据以使用 Jquery AJAX 提交

在 DataTable Delete 操作中多次发送 Ajax 请求 - ASP.NET、JQuery、Ajax

使用 Laravel 将 jQuery Ajax POST 请求作为 GET 发送

通过表单与 jquery/ajax 发送 json