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

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

<divclass="process-wrapper"id="processWrap"><divclass="process-face"></div><imgclass="close-icon"id="closeBtn"src="../../images/close.png"alt=""><divclass="process"><divclass="process-inner"id="processInner"></div><divclass="process-value"><span>提交中...</span><spanid="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=newXMLHttpRequest();doc.addEventListener('netchange',onNetChange,false);functiononNetChange(){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){varprogressBar=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;varxhr=option.xhr||newXMLHttpRequest();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){varr=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实现代码

constexpress=require("express");constmulter=require("multer");constexpressStatic=require("express-static");constfs=require("fs");letserver=express();letupload=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中如何监听附件上传进度”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。