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

try to pakage ajax by myself optional paramas: method: get(default) post url data: Allow Type: Object, FormData dataType: Object(default) , auto translate to urldecode json file async: true(default) false showProgress: if dataType is "file" and this is a function, it will be called instantly success: callback function while request successfully param: server responseText fail: callback funciton while request failed main function function ajax(options){ var opt = { method: "GET", async: true, } //if browser dosen't support Object.assign() you can define by yourself Object.assign(opt,options) if(!opt.url) return var XMLHttp = null if(XMLHttpRequest){ XMLHttp = new XMLHttpRequest() }else{ XMLHttp = new ActiveXObject("Microsoft.XMLHTTP") } //method: post if(!!opt.method && opt.method.toUpperCase() == "POST"){ XMLHttp.open("POST",opt.url,opt.async) //dataType: json if(!!opt.dataType && opt.dataType.toUpperCase() == "JSON"){ opt.postData = JSON.stringify(opt.data) XMLHttp.setRequestHeader("Content-Type","application/json") XMLHttp.send(opt.postData) } //dataType: file else if(!!opt.dataType && opt.dataType.toUpperCase() == "FILE"){ XMLHttp.send(opt.data) } //dataType: Object else{ var param = [] for(var key in opt.data){ if(opt.data.hasOwnProperty(key)){ param.push(key+"="+opt.data[key]) } } opt.postData = param.join('&') var urlparams = opt.url.slice(opt.url.indexOf('?')+1) if(urlparams.indexOf('?') == -1){ opt.postData.concat('&'+urlparams) } XMLHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8') XMLHttp.send(opt.postData) } } //method: get else if(opt.method.toUpperCase() === "GET"){ var params = [] if(!!opt.data){ for(var…