vzhen vzhen - 5 months ago 10
jQuery Question

HTML5 file upload formdata with jquery ajax

I want to use html5 formData along with jquery ajax to perform ajax file upload (Single File), but this not working. Below is my js code

//I tried this but return Cannot read property '0' of undefined
var file = $folderID.find('.add-file').files[0];

//I also tried this no error return, no file uploaded, no data inserted to db.
var file = $folderID.find('.add-file')[0].files[0];
var formData = new FormData();
formData.append("file", file);

var tag = $folderID.find('.hidden-tag').val();

$.ajax({
type: 'POST',
contentType:false,
processData:false,
url: baseUrl + 'folder/post',
data: {'file':formData ,'tag':tag},
error: function (request, status, error) {
alert(request.responseText);
}
});


Note: the php file is working perfectly without using ajax.

Update
headers return 302 not found and request payload
[object] [object]

Answer

Fixed, I moved all the jquery .val() to formdata.

Example

formData.append("file", file);
formData.append("tag", tag);