HTML5 file upload formdata with jquery ajax

Question

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]

vzhen · Accepted Answer · 2013-01-29 01:17:36Z

1

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

Example

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

answered Jan 29, 2013 at 1:17

vzhen

11.2k14 gold badges58 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML5 file upload formdata with jquery ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related