Layui表格中⽂件上传显⽰进度条
Layui表格中⽂件上传显⽰进度条
问题背景
jquery下载文件请求
  ⽂件上传是⼀个⾮常基础的问题了，⽇常项⽬中经常会遇到，最简单的⽅式就是前端设置⼀个上传按钮，后端设置⽅法进⾏接收，对于较⼩的⽂件和较⾼的带宽来说⽂件很快就能上传，⽤户体验良好，但是对于较⼤的⽂件和较低的带宽时，前端会⼀直阻塞在页⾯，容易给⽤户造成界⾯卡住的误会，所以想到⽤进度条提⽰给⽤户当前上传的进度，本⽂将介绍Layui框架在⽂件上传进度显⽰中的应⽤，其余框架⼤家可以借照思路进⾏参考，作者在这⾥进⾏抛砖引⽟，希望能对⼤家有帮助。
  对于该问题，想到两种解决⽅式，⽅法⼀，前端读取⽂件，通过计算当前⼀共向服务器传输多少字节，再除以⽂件总⼤⼩得出传输进度作为⽂件上传进度。⽅法⼆，前端不读取⽂件，⽽是通过短轮询不断向后台请求服务器接收了多少百分⽐，后端通过接收字节，再除以⽂件总⼤⼩得出接收进度作为⽂件上传进度。
  ⽅法⽐较，⽅法⼀通过客户端进⾏计算，减少了服务器压⼒，在多⽤户同时间段上传时效果较好，⽅法⼆，服务器需要将接收百分⽐放到session中，前端再通过不断查询获取服务器接收进度，此⽅法⽐较浪
费资源，短轮询时间不容易控制，时间太短容易给服务器造成太⼤压⼒，时间太长⽤户感知接收进度不及时。所以我们在实战项⽬中主要应⽤第⼀种⽅法，第⼆种⽅法作为参考。
⽅法⼀、前端计算上传进度
主要流程：
修改layui的upload组件，使之⽀持进度回调，回调函数使⽤的是jQuery的xhr，也就是XMLHttpRequest
改写其中的progress函数，该函数作⽤为监听上传进度，将该函数重新指向为layui的upload的⾃定义监听函数在渲染upload组件时配置xhr属性，并添加progress⽅法作为progress回调函数的执⾏⽅法
页⾯配置layui/progress进度条组件和⽂件上传按钮，在⽂件上传前对⽂件进⾏预处理，获取⽂件名称和⼤⼩作为消息显
⽰，onprogress监听函数会不断调⽤progress函数，对progress进度条不断更新
1.修改layui组件
  由于原⽣框架2.5.5以前不⽀持⽂件上传进度显⽰，所以我们要在组件中添加新的功能，layui/modules/upload.js⽂件中，该代码块为upload组件配置代码，在该处添加如下代码
注：Layui2.5.5及以后的版本加⼊了上传进度条回调函数，使⽤较新的版本可以跳过前3步
/* ⽀持进度回调 */
xhr: l.xhr(function(e){//此处为新添加功能
var percent = Math.floor((e.loaded / e.total)*100);//计算百分⽐
l.progress(percent);//回调将数值返回
}),
为了防⽌不配置xhr⽽报错，还需在layui/modules/upload.js⽂件中配置默认选项，该代码块为upload组件配置代码，在该处添加如下代码
xhr:function(){}//xhr空函数的定义，防⽌不设置报错
2.重定向xhr监听上传函数
defend名词形式在页⾯js代码中添加如下代码
/* 设置进度条 */
var xhrOnProgress=function(fun){
console.progress);
//使⽤闭包实现监听绑
return function(){
//通过$.ajaxSettings.xhr()；获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
网页appif(progress !=='function')
return xhr;
//如果有监听函数并且xhr对象⽀持绑定时就把监听函数绑定上去
帝国仿站详细过程
progress && xhr.upload){
progress = progress;
}
return xhr;
}
}
3.配置upload组件
在渲染upload组件时添加如下配置
demoFlag作为全局变量控制进度条在⽂件预处理后再开始变化
demoCount控制progress组件id
/* 添加进度条回调 */
xhr: xhrOnProgress,
progress:function(value){//上传进度回调 value进度值，由于是进度条同时⼜是多⽂件上传不只⼀个进度条，所以要保证每次进度条的类名不⼀致，demoCou nt控制类名，demoFlag保证上下⼀致，所以该⽅法⼀直在被调⽤
console.log(value);
if(demoFlag){
layui.element.progress(`progress${demoCount}`, value +'%')//设置页⾯进度条
}
},
4.页⾯显⽰以及预处理
  由于该⽅法是前端计算⽂件上传进度，所以在开始上传前需要前端对⽂件进⾏预处理获取⽂件的信息对⽤户显⽰，这与后端计算⽂件上传进度不同，在完全上传前，前端只能进⾏上传操作，不能通过后
端获取⽂件信息，所以可能出现信息不匹配的问题，例如，该⽂件名称在后端重名了，可能后端要对⽂件名称进⾏修改，⼜例如前端上传时间为发送时间，后端上传时间为接收时间可能存在时间不匹配问题，所以解决办法，可以设置⽂件原始名称originName和服务器⽂件名称fileName，上传时间uploadTime和接收时间receiveTime进⾏区别显⽰。
  layui/table展⽰区别，由于layui/table是通过url获取后端数据进⾏渲染的，但是⽅法⼀需要在原始数据上添加⼀条新的数据，该数据仅仅是由前端对⽂件预处理获取的，所以这⾥介绍⼀个坑，就是纯前端的数据crud，在load时需要将url设置为空，否则重加载时会加载后端数据⽽丢失前端对⽂件预处理的数据。
before:function(obj){
layer.load(2);
/* 前端预览⽂件对象 */
obj.preview(function(index, file, result){
var size = file.size;
var fileName = file.name;
demoCount = index;
console.log(fileName, size, demoCount);
demoFlag =true;
/* 向动态表格添加⾃定义⾏ */
var array = table.cache['fileTable'];
console.log(array);
var data ={"name": fileName,"size": size,"progress":100,"filter": demoCount};
array.unshift(data);
console.log(array);
url:"",
data: array
});
})
},
织梦cms后台layui表头配置代码
field:'progress', title:'上传进度', align:'center', sort:true,templet:function(d){
console.log(d)
d.filter ==undefined? d.filter = d.LAY_INDEX: d.filter;
d.progress ==undefined? d.progress =100: d.progress;
var color ='layui-bg-green';
if(d.progress >50&& d.progress <=100){
color ='layui-bg-green'
乱码卡一卡二新区网站 仙踪林}else if(d.progress >20&& d <=50){
color ='layui-bg-orange'
}
return'<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="progress'+ d.filter +'">'+ '<div class="layui-progress-bar '+ color +'" lay-percent="'+ d.progress +'%">'+
'</div></div>'
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。