如何使用Ajax发送FormData对象

这个问题在这里已经有了答案：

用jQuery.ajax发送multipart / formdata 11个答案

---

我相信你可以这样做：

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

将processData设置为false可以防止jQuery自动将数据转换为查询字符串。 有关更多信息，请参阅文档。

将contentType设置为false是势在必行的，否则jQuery会将其设置不正确。

---

还有一些尚未提及的技术可供您使用。 首先在ajax params中设置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 ，人们在使用beforeSend来重写mimeType之前，它已被添加到1.5.1中的jQuery中。 您应该可以修改before send事件中jqXHR对象的任何内容。

---

您可以使用以下代码在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对象内的form元素作为参数

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

希望能帮助到你。 ;）

链接地址: http://www.djcxy.com/p/3303.html

上一篇: How to send FormData objects with Ajax

下一篇: Most elegant way to check if the string is empty in Python?