如何使用jQuery.ajax和FormData上传文件
如何使用jQuery.ajax和FormData上传文件
提问于 2012-03-09 02:33:46
当我使用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
Stack Overflow用户
回答已采纳
发布于 2012-03-09 02:40:03
您必须将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
}
});
} Stack Overflow用户
发布于 2021-04-20 20:49:13
如果您从包含输入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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9622901
复制相关文章
相似问题