如何使用jQuery.ajax和FormData上传文件

Question

我使用XMLHttpRequest时，可以通过FormData正确地上传文件。但是，当我切换到jQuery.ajax时，我的代码出现了问题。

这是原始的正常工作代码：

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php", true);
    xhr.send(fd);
}

这是我的不成功的 jQuery.ajax 尝试：

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xm = $.ajax({
        url: "upload.php",
        type: "POST",
        data: fd,
    });
}

我做错了什么？如何使用 AJAX 正确上传文件？

- Harts

Answer 1

您需要在方法中添加processData:false,contentType:false，这样jQuery就不会更改标头或数据（这会破坏您当前的代码）。

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);

    $.ajax({
       url: "upload.php",
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(response) {
           // .. do something
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage); // Optional
       }
    });
}  

- Rob W

---

如果可以的话，我会为这个答案点赞1000次。在所有其他对这个问题的回答中，这一个效果最好且最简单。谢谢。 - sqram

警告：在 IE 版本 10 之前不支持 FormData。 - Scott D. Strader

在这个答案（和问题）中，“blobFile”是什么？它是一个input.val()吗？ 在这个答案（和问题）中，“blobFile”是指一个变量或对象，但无法确定它是不是通过调用input.val()函数获得的。 - user1469270

@tmyie 这是一个 Blob 或 File 对象，例如对于 <input type="file" id="filechooser">，它是 document.getElementById('filechooser').files[0]（前提是用户已经选择了文件）。 （在 jQuery 中，使用 $('#filechooser')[0].files[0]） - Rob W

fd.append('field_name', 'string_field_value'); - 参见 https://developer.mozilla.org/zh-CN/docs/Web/API/FormData ：在表单数据中添加一个字段(field)，并为其设置字符串值(string_field_value)。 - Rob W

Answer 2

如果您正在从包含文件输入的HTML5表单上传，则可以使用querySelector和FormData，它就可以工作。

在PHP的情况下，它将为您提供$_FILE中的所有文件和$_POST数组中的所有其他输入。

JS / jQuery：

function safeFormWithFile()
{
  var fd = new FormData(document.querySelector('#myFormName'));

  $.ajax({
        url:'/catchFormData.php',
        method:'POST',
        data:fd,
        processData: false,
        contentType: false,
        success:function(data){
          console.log(data);
        }
  });
}

HTML：

<form id="myFormName">
  <input id="myImage" name="myImage" type="file">
  <input id="myCaption" name="myCaption" type="text">
</form>

- Max