How to upload a file using jQuery.ajax and FormData
87,345
You have to add processData:false,contentType:false
to your method, so that jQuery does not alter the headers or data (which breaks your current code).
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
}
});
}
Author by
Harts
Updated on July 08, 2022Comments
-
Harts almost 2 years
When I use XMLHttpRequest, a file is correctly uploaded using
FormData
. However, when I switch tojQuery.ajax
, my code breaks.This is the working original code:
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); }
Here is my unsuccessful
jQuery.ajax
attempt:function uploadFile(blobFile, fileName) { var fd = new FormData(); fd.append("fileToUpload", blobFile); var xm = $.ajax({ url: "upload.php", type: "POST", data: fd, }); }
What am I doing wrong? How can I get the file to be uploaded correctly, using AJAX?