you can do that with a XHRListener. i did something similar before some time, here's a snippet of the code i used:
jQuery.ajax({
url: 'url/to/upload/to',
data: formMediaData,
dataType:'json', //return type, in my case it was json
type: 'post',
xhr: function(){
// this is the important part
var xhr = new window.XMLHttpRequest();
//the event listener will call _very_ often, you might want to check
// how big the difference between the last percentage and this
//percentage is, before you do anything that needs long computing times(!)
xhr.upload.addEventListener("progress", function(evt){
//check if the browser can determine the complete size of the data.
if (evt.lengthComputable) {
var percentComplete = Math.round((evt.loaded / evt.total)*100);
//do something with the percentage...
console.log("upload " +percentComplete + "% done");
}
},false);
return xhr;
},
success: function(data){
//do some tasks after upload
console.log("upload done");
}
});
here's how you add files:
html:
<!-- accept="image/*" will only accept file miming to be an image, remember to check if it really is an 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 where the ajax is sent
}