如何在 jQuery 中使用 Ajax 请求发送 FormData 对象?

IT技术 javascript jquery ajax html multipartform-data
2021-02-07 23:08:30

XMLHttpRequest的2级标准(还是一个工作草案)定义FormData的接口。此接口允许将File对象附加到 XHR 请求(Ajax 请求)。

顺便说一句,这是一个新功能 - 过去,使用了“隐藏的 iframe 技巧”(在我的另一个问题中阅读)。

这是它的工作原理(示例):

var xhr = new XMLHttpRequest(),
    fd = new FormData();

fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );

其中input是一个<input type="file">字段,handler是 Ajax 请求的成功处理程序。

这在所有浏览器中都能很好地工作(同样,IE 除外)。

现在,我想让这个功能与 jQuery 一起工作。我试过这个:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );

不幸的是,这不起作用(抛出“非法调用”错误 -屏幕截图在这里)。我假设 jQuery 需要一个简单的键值对象来表示表单字段名称/值,而FormData我传入实例显然不兼容。

现在,由于可以将FormData实例传递给xhr.send(),我希望它也可以与 jQuery 一起使用。


更新:

我在 jQuery 的 Bug Tracker 上创建了一个“功能票”。它在这里:http : //bugs.jquery.com/ticket/9995

有人建议我使用“Ajax 预过滤器”...


更新:

首先,让我给出一个演示来演示我想要实现的行为。

HTML:

<form>
    <input type="file" id="file" name="file">
    <input type="submit">
</form>

JavaScript:

$( 'form' ).submit(function ( e ) {
    var data, xhr;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    xhr = new XMLHttpRequest();

    xhr.open( 'POST', 'http://hacheck.tel.fer.hr/xml.pl', true );
    xhr.onreadystatechange = function ( response ) {};
    xhr.send( data );

    e.preventDefault();
});

上面的代码导致这个 HTTP 请求:

多部分数据

这就是我需要的- 我想要“多部分/表单数据”内容类型!


建议的解决方案如下:

$( 'form' ).submit(function ( e ) {
    var data;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',
        success: function ( data ) {
            alert( data );
        }
    });

    e.preventDefault();
});

但是,这会导致:

错误的内容类型

如您所见,内容类型错误...

6个回答

我相信你可以这样做:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

笔记:

  • 设置processDatafalse允许您阻止 jQuery 自动将数据转换为查询字符串。有关更多信息,请参阅文档

  • 设置contentTypetofalse是必须的,否则 jQuery会错误地设置它

不幸的是,这会导致设置错误的“Content-Type”HTTP 请求标头。有关我想要实现的目标以及为什么您当前的解决方案不满足的详细说明,请参阅我的问题。也许我可以手动设置 Content-Type?
2021-03-13 23:08:30
将 processData 和 contentType 设置为 false 为我解决了这个问题。谢谢,那是不愉快的。
2021-03-13 23:08:30
是的,我相信您可以通过在 $.ajax 参数中添加键值对来手动将 contentType 设置为“multipart/form-data”。
2021-03-17 23:08:30
嗨@pradeek,我们在这里尝试了这个解决方案(stackoverflow.com/questions/10215425/...),但不清楚如何在 POST 请求的正文中传递图像数据。有什么线索吗?谢谢!
2021-04-01 23:08:30
在 Firefox 和 Chrome 中测试。这就是解决方案。
2021-04-01 23:08:30

有一些尚未提及的技术可供您使用。首先在 ajax 参数中设置 contentType 属性。

以 pradeek 的示例为基础:

$('form').submit(function (e) {
    var data;

    data = new FormData();
    data.append('file', $('#file')[0].files[0]);

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',

        // This will override the content type header, 
        // regardless of whether content is actually sent.
        // Defaults to 'application/x-www-form-urlencoded'
        contentType: 'multipart/form-data', 

        //Before 1.5.1 you had to do this:
        beforeSend: function (x) {
            if (x && x.overrideMimeType) {
                x.overrideMimeType("multipart/form-data");
            }
        },
        // Now you should be able to do this:
        mimeType: 'multipart/form-data',    //Property added in 1.5.1

        success: function (data) {
            alert(data);
        }
    });

    e.preventDefault();
});

在某些情况下,当强制 jQuery ajax 做非预期的事情时,beforeSend事件是一个很好的地方。有一段时间,人们beforeSend在 1.5.1 中将 mimeType 添加到 jQuery 之前使用它来覆盖。您应该能够在 before send 事件中修改 jqXHR 对象上的任何内容。

@romkyns 我正在从头顶编码这个。如果您有一些我没有的经验/知识,请继续编辑答案!既然你提到了它,快速搜索一下:stackoverflow.com/questions/5933949/...这应该会让你朝着正确的方向前进。(如果您愿意,您可以从该示例中获取并将其合并到上面的 jQuery 中。)
2021-03-20 23:08:30
我对这个解决方案寄予厚望,但我的 $_FILES 仍然是 NULL...
2021-03-26 23:08:30
实际上,当前接受的答案(我编辑以添加关键修复)终于做了正确的事情。这很棘手:)
2021-03-27 23:08:30
这有一个问题:规范要求多部分内容类型包括边界参数(具体来说,它被声明为必需参数)。
2021-04-02 23:08:30

您可以使用以下代码在 ajax 请求中发送 FormData 对象,

$("form#formElement").submit(function(){
    var formData = new FormData($(this)[0]);
});

这与接受的答案非常相似,但却是对问题主题的实际答案。这将在 FormData 中自动提交表单元素,您无需手动将数据附加到 FormData 变量。

ajax 方法看起来像这样,

$("form#formElement").submit(function(){
    var formData = new FormData($(this)[0]);
    //append some non-form data also
    formData.append('other_data',$("#someInputData").val());
    $.ajax({
        type: "POST",
        url: postDataUrl,
        data: formData,
        processData: false,
        contentType: false,
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
           //process data
        },
        error: function(data, textStatus, jqXHR) {
           //process error msg
        },
});

您还可以手动将 FormData 对象内的表单元素作为参数传递,如下所示

var formElem = $("#formId");
var formdata = new FormData(formElem[0]);

希望能帮助到你。;)

$(this)[0]一样this吗?
2021-03-26 23:08:30
@halbano$(this)返回的不是数组,而是可以像数组一样迭代的 jQuery 集合对象。form[0]与 几乎完全相同form.first(),它只返回第一个真正的 HTML 元素。
2021-03-31 23:08:30
为什么 $(this) 返回一个数组?
2021-04-08 23:08:30

我这样做,它对我有用,我希望这会有所帮助:)

   <div id="data">
        <form>
            <input type="file" name="userfile" id="userfile" size="20" />
            <br /><br />
            <input type="button" id="upload" value="upload" />
        </form>
    </div>
  <script>
        $(document).ready(function(){
                $('#upload').click(function(){

                    console.log('upload button clicked!')
                    var fd = new FormData();    
                    fd.append( 'userfile', $('#userfile')[0].files[0]);

                    $.ajax({
                      url: 'upload/do_upload',
                      data: fd,
                      processData: false,
                      contentType: false,
                      type: 'POST',
                      success: function(data){
                        console.log('upload success!')
                        $('#data').empty();
                        $('#data').append(data);

                      }
                    });
                });
        });
    </script>   
fd.append('userfile', $('#userfile')[0] .files[0]); 这是您需要为输入文件添加 ID 才能工作的不同之处。
2021-03-19 23:08:30
这与接受的答案有何不同?
2021-03-20 23:08:30
这个比其他人帮助我..
2021-04-01 23:08:30

JavaScript:

function submitForm() {
    var data1 = new FormData($('input[name^="file"]'));
    $.each($('input[name^="file"]')[0].files, function(i, file) {
        data1.append(i, file);
    });

    $.ajax({
        url: "<?php echo base_url() ?>employee/dashboard2/test2",
        type: "POST",
        data: data1,
        enctype: 'multipart/form-data',
        processData: false, // tell jQuery not to process the data
        contentType: false // tell jQuery not to set contentType
    }).done(function(data) {
        console.log("PHP Output:");
        console.log(data);
    });
    return false;
}

PHP:

public function upload_file() {
    foreach($_FILES as $key) {
        $name = time().$key['name'];
        $path = 'upload/'.$name;
        @move_uploaded_file($key['tmp_name'], $path);
    }
}