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

Posted

技术标签:

【中文标题】如何使用 jQuery.ajax 和 FormData 上传文件【英文标题】:How to upload a file using jQuery.ajax and FormData 【发布时间】:2012-03-26 05:53:23 【问题描述】:

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

【问题讨论】:

【参考方案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
       
    );
  

【讨论】:

如果可以的话,我会投票 1000 次。在关于 SO 的这个问题的所有其他答案中,这个是最好的,也是最简单的。谢谢。 警告:IE 10 之前不支持 FormData。 在这个答案(和问题)中,blobFile 是什么?是 input.val() 吗? @tmyie 这是一个BlobFile 对象,例如对于<input type="file" id="filechooser">,它是document.getElementById('filechooser').files[0](前提是用户选择了一个文件)。 (在 jQuery 中,$('#filechooser')[0].files[0] @MarceloBarbosa fd.append('field_name', 'string_field_value'); - 见developer.mozilla.org/en-US/docs/Web/API/FormData【参考方案2】:

如果您从包含输入 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>

【讨论】:

以上是关于如何使用 jQuery.ajax 和 FormData 上传文件的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 php jquery ajax 上传文件和插入数据

如何使用 jquery.ajax 正确管理 dataable.js

如何使用 jQuery 和 ASP.NET MVC 从 AJAX 调用返回错误消息?

如何使用 Web 服务和 jQuery Ajax 启用 CORS

如何在 Django 中使用 jQuery/Ajax 发布?

复选框状态更改时如何更新mysql字段?使用 jquery (ajax)、php 和 mysql