layui多文件上传讲解_Layui多文件上传进度条

Layui原生upload模块不支持文件上传进度条显示，百度，谷歌找了一下不太适用。后面找到一个别人修改好的JS，替换上去，修改一下页面显示即可使用，一下是部分代码

HTML:

选择多文件

文件名大小上传进度状态操作

开始上传

JS部分：

var files;

//多文件列表示例

var demoListView = $('#demoList')

, uploadListIns = upload.render({

elem: '#fileList'

, size: 102400 //限制文件大小，单位 KB

, exts: 'zip|rar|7z|doc|docx|pdf|txt|xls|ppt|xlsx|pptx|img|jpg|png|gif|bmp|jpeg' //只允许上传压缩文件

, url: webroot + "/guarantee/upload/uploadFile?userid=123456"

, accept: 'file'

, multiple: true

, auto: false

, bindAction: '#fileListAction'

, xhr: xhrOnProgress

, progress: function (value) {//上传进度回调 value进度值

element.progress('demoList', value + '%')//设置页面进度条

}, xhr: function (index, e) {

var percent = e.loaded / e.total;//计算百分比

percent = parseFloat(percent.toFixed(2));

element.progress('progress_' + index + '', percent * 100 + '%');

console.log("-----" + percent);

}

// , data: JSON.stringify(Param)

, choose: function (obj) {

var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

//读取本地文件

obj.preview(function (index, file, result) {

var tr = $(['

'

, '

' + file.name + ''

, '

' + (file.size / 1014).toFixed(1) + 'kb'

, '

'

, '

等待上传'

, '

'

, '重传'

, '删除'

, '

'

, '

'].join(''));

//单个重传

tr.find('.demo-reload').on('click', function () {

obj.upload(index, file);

});

//删除

tr.find('.demo-delete').on('click', function () {

delete files[index]; //删除对应的文件

tr.remove();

uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选

});

demoListView.append(tr);

});

}

,

before: function (obj) {

this.data = {

"BUSINESS_ID": BUSINESS_ID,

"FLOW_ID": FLOW_ID,

"FLOW_NODE_ID": FLOW_NODE_ID,

"FILE_TYPE": FILE_TYPE

}///携带额外的数据

}

,

done: function (res, index, upload) {

if (res.code == 0) { //上传成功

var tr = demoListView.find('tr#upload-' + index)

, tds = tr.children();

tds.eq(3).html('上传成功');

tds.eq(4).html(''); //清空操作

var url = webroot + "/guarantee/itemFile/getItemFileByFlow?FLOW_ID=" + FLOW_ID + "&BUSINESS_ID=" + BUSINESS_ID + "&FLOW_NODE_ID=" + FLOW_NODE_ID + "&FILE_TYPE=" + FILE_TYPE

//刷新表格

table.reload('itemFileList', {

url: url

, where: {} //设定异步数据接口的额外参数

//,height: 300

});

return delete this.files[index]; //删除文件队列已经上传成功的文件

} else if (res.code == -1) {

layer.msg(res.msg);

}

this.error(index, upload);

}

,

error: function (index, upload) {

var tr = demoListView.find('tr#upload-' + index)

, tds = tr.children();

tds.eq(2).html('上传失败');

tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传

}

})

;

注：还需替换layui的upload模块的upload.js文件

作者：onlooker

来源：三无青年博客br

原文：https://www.35youth.cn/644.html

版权声明：本文为博主原创文章，转载请附上博文链接！