vzhen vzhen - 2 years ago 122
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();

type: 'POST',
url: baseUrl + 'folder/post',
data: {'file':formData ,'tag':tag},
error: function (request, status, error) {

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

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

Answer Source

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


formData.append("file", file);
formData.append("tag", tag);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download