如何使用 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 这是一个Blob
或File
对象,例如对于<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