![](/img/trans.png)
[英]How to upload file in laravel with formData in jquery ajax
[英]How to upload a file using jQuery.ajax and FormData
当我使用 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 正确上传文件?
您必须将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
}
});
}
如果您从包含输入 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.