相思资源网 Design By www.200059.com
本文主要介绍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/")
});
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无Html5 new XMLHttpRequest()监听附件上传进度的评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。