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

本文主要介绍new XMLHttPRequest()监听附件上传进度，解决优化loading长时间加载，用户等待问题

一、存在问题

经测试发现，new XMLHttpRequest()在附件上传请求中，wifi关闭切4G上传，上传进度不会持续；4G不关闭打开WIFI会继续上传，但等待时间过长，实际上是4G在上传，倘若关闭4G网络，上传进度终止。

二、相关代码

2.1 HTML

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>
    

2.2 CSS样式

/* 附件上传进度条 */.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;
}
    

2.3 JS

(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);
    

三、app.js封装ajax请求

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);
}
,}
    

拓展：后端NodeJS实现代码

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/")}
    );
    

到此这篇关于Html5 new XMLHttpRequest()监听附件上传进度的文章就介绍到这了,更多相关Html5 监听附件上传内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！