Html5 new XMLHttpRequest()监听附件上传进度

 <div class="process-wrapper" id="processWrap">  <div class="process-face"></div>  <img class="close-icon" id="closeBtn" src="../../images/close.png" alt="">  <div class="process">   <div class="process-inner" id="processInner" style="width:50%"></div>   <div class="process-value">    <span>提交中...</span>     <span id="process">0%</span>   </div>  </div> </div>

 /* 附件上传进度条 */ .process-wrapper{  -moz-user-select:none;  position: fixed;  left: 0;  top: 0;  bottom: 0;  right: 0;  z-index: 10000;  display: none; } .process-face{  width: 100%;  height: 100%;  background-color: #000;  opacity: 0.7;  position: fixed; } .close-icon{  width: 26px;  height: 26px;  position: fixed;  left: 50%;  top: calc( 50% + 40px );  transform: translate(-50%,-50%); } .process{  width: 90%;  height: 30px;  background-color: #fff;  border-radius: 30px;  overflow: hidden;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);  text-align: center;  font-size: 14px;  line-height: 30px;  color: #999; } .process-inner{  width: 100%;  height: 30px;  position: absolute;  left: 0;  top: 0;  background-color: #0079C1;  transition: 0.1s;  z-index: -1; } 

 (function(app, doc) {    var $processWrap = document.getElementById("processWrap"),  $closeBtn = document.getElementById("closeBtn"),  xhr = new XMLHttpRequest();  doc.addEventListener('netchange', onNetChange, false);  function onNetChange() {   if ($processWrap.style.display != "none") {    $processWrap.style.display = "none";    xhr.abort();    mui.toast('网络中断请重试');   }  }  doSend: function() {    app.ajaxFile({  //封装好的ajax请求     url: "",    data: FormData,    xhr: xhr,    success: function(r) {     if (r == '1') {      mui.toast("保存成功");      // 上传成功逻辑处理     } else {      $processWrap.style.display = "none";      mui.toast(app.netError);     }    },    error: function(r) {     $processWrap.style.display = "none";    },    progress: function(e) {     if (e.lengthComputable) {      var progressBar = parseInt((e.loaded / e.total) * 100);      if (progressBar < 100) {       $progress.innerHTML = progressBar + "%";       $processInner.style.width = progressBar + "%";      }     }    },    timeout:function(){     $processWrap.style.display = "none";    }    });  })  mui.plusReady(function() {   $closeBtn.addEventListener("tap",function(){    setTimeout(function(){     $processWrap.style.display = "none";     xhr.abort();    }, 400);   })  }); })(app, document);  

 var $ajaxCount = 0;  window.app = {  //ajaxFile超时时间  fileTimeout: 180000,  ajaxFile: function(option) {  $ajaxCount++;   var _ajaxCount = $ajaxCount;  if (!option.error) {   option.error = ajaxError; // 请求失败提示  }  if (option.validateUserInfo == undefined) option.validateUserInfo = true;  var xhr = option.xhr || new XMLHttpRequest();  xhr.timeout = app.fileTimeout;  xhr.open('POST', app.getItem(app.localKey.url) + option.url, true);  xhr.onreadystatechange = function() {   if (xhr.readyState == 4 && xhr.status == 200) {    var r = xhr.responseText;    if (r) {     r = JSON.parse(r);    }    if (_ajaxCount == $ajaxCount) {     option.success && option.success(r);    }   }  }  xhr.upload.onprogress = function (e) {   option.progress(e);  }  xhr.onerror = function(e) {   option.error(e); // 添加 上传失败后的回调函数  }  xhr.ontimeout = function(e){   option.timeout(e);   app.closeWaiting();   $.toast("请求超时,请重试");   xhr.abort(); 　　}  xhr.send(option.data); }, }  

 const express = require("express"); const multer = require("multer"); const expressStatic = require("express-static"); const fs = require("fs");  let server = express(); let upload = multer({ dest: __dirname+'/uploads/' }) // 处理提交文件的post请求 server.post('/upload_file', upload.single('file'), function (req, res, next) {   console.log("file信息", req.file);   fs.rename(req.file.path, req.file.path+"."+req.file.mimetype.split("/").pop(), ()=>{     res.send({status: 1000})   }) })  // 处理静态目录 server.use(expressStatic(__dirname+"/www")) // 监听服务 server.listen(8080, function(){   console.log("请使用浏览器访问 http://localhost:8080/") });