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

IT技术 javascript jquery ajax file-upload xmlhttprequest
2021-02-03 13:46:09

当我使用 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 正确上传文件？

2个回答

您必须添加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
       }
    });
}
在这个答案（和问题）中，什么是blobFile？它是一个 input.val() 吗？
2021-03-16 13:46:09
警告：直到版本 10，IE 才支持 FormData。
2021-03-19 13:46:09
@tmyie 它是一个Blob或File对象，例如因为<input type="file" id="filechooser">它是document.getElementById('filechooser').files[0]（前提是用户选择了一个文件）。（在 jQuery 中，$('#filechooser')[0].files[0]）
2021-03-26 13:46:09
@MarceloBarbosa fd.append('field_name', 'string_field_value');- 见developer.mozilla.org/en-US/docs/Web/API/FormData
2021-04-11 13:46:09
如果可以的话，我会赞成 1000 次。在关于这个问题的所有其他答案中，这个是最好的，也是最简单的。谢谢。
2021-04-12 13:46:09

如果您从包含输入 fo 类型文件的 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>
其它你可能感兴趣的问题
上一篇提交表单并停留在同一页面上？ 下一篇使用 JsonP 的 JavaScript XMLHttpRequest