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

网页制作 2024/12/29 佚名

3 1 2

本文主要介绍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,XMLHttpRequest(),监听附件上传

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“Html5 new XMLHttpRequest()监听附件上传进度”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月29日