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


Posted in HTML / CSS onJanuary 14, 2021

本文主要介绍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 监听附件上传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
css3中的calc函数浅析
Jul 10 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 #HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 #HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 #HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 #HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 #HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 #HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 #HTML / CSS
You might like
在PHP中使用模板的方法
2008/05/24 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python django生成迁移文件的实例
2019/08/31 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
ORACLE第二个十问
2013/12/14 面试题
求职推荐信
2013/10/28 职场文书
中学教师管理制度
2014/01/14 职场文书
学习型党组织心得体会
2014/09/12 职场文书
毕业证委托书范文
2014/09/26 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
JS函数式编程实现XDM一
2022/06/16 Javascript
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript