Html5中如何监听附件上传进度

这篇"Html5中如何监听附件上传进度"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"Html5中如何监听附件上传进度"文章吧。

一、存在问题

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

二、相关代码

2.1 HTML

 
  
  
  
   提交中...    0%  
 

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[xss_clean] = 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中如何监听附件上传进度"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。