How to use Jquery Ajax to upload files with uploading progress get single file let data = $('input[tpye=file]')[0].files[0] let file = new FormData() file.append('file',data) pakage uploading progress xhr function function onprogress(){ var loaded = evt.loaded; var tot = evt.total; var per = Math.floor(100*loaded/tot) console.log(per) } function xhr(){ let xhr = $.ajaxSettings.xhr() if(onprogress && xhr.upload){ xhr.upload.addEventListener("progress" , onprogress, false); return xhr; } } use $.ajax() to upload $.ajax({ url:'url address', type:'POST', contentType:false, processData:false, data:file, xhr:xhr, success:function(res){ //handle funciton } }) more about jquery ajax