Jquery Ajax File Upload facebook style -

i have one: http://malsup.com/jquery/form/‎ .. works okay want upload progress system facebook, window loads while file uploading , upload progress shown @ left bottom corner of browser. there such jquery ajax form submission supports file uploading.

you can xhrlistener. did similar before time, here's snippet of code used:

jquery.ajax({     url: 'url/to/upload/to',     data: formmediadata,     datatype:'json', //return type, in case json     type: 'post',     xhr: function(){          // important part         var xhr = new window.xmlhttprequest();          //the event listener call _very_ often, might want check         // how big difference between last percentage ,          //percentage is, before needs long computing times(!)          xhr.upload.addeventlistener("progress", function(evt){             //check if browser can determine complete size of data.             if (evt.lengthcomputable) {                 var percentcomplete = math.round((evt.loaded / evt.total)*100);                  //do percentage...                  console.log("upload " +percentcomplete + "% done");             }         },false);         return xhr;     },     success: function(data){         //do tasks after upload         console.log("upload done");     } }); 

here's how add files:

html:

<!-- accept="image/*" accept file miming image, remember check if image... --> <input type="file" id="uploadbox" accept="image/*" onchange="handlemediafiles(this.files)" /> 

js:

var formmediadata= new formdata();  function handlemediafiles(files){     for(var i=0;i<files.length;i++){         formmediadata.append('file_'+i,file[i]);     }     fileupload(); // that's ajax sent   }