javascript - Why is the body of my ajax multipart/form-data POST request empty? -

i have following form in html:

<form id="formid" action="upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> </form> 

i submit post request via ajax follows:

function upload_ajax(){   var xhr = new xmlhttprequest();    var form = $("#formid");   var formdata = new formdata(form);    xhr.open("post", form.attr('action') , true);   xhr.send(formdata); } 

but when select file , run upload_ajax(), file not sent server. on examining post request can see body empty (except boundary:------webkitformboundaryzrrtlc7acnj5mkte--).

everything works fine if replace upload_ajax() upload_normal() below:

function upload_normal(){    $('#formid').submit(); }  

can understand doing wrong in ajax call?

i think error $("#formid") jquery object , not form.

to access form write:

var form = $("#formid")[0];