Layui原生upload模塊不支持文件上傳進度條顯示，百度，谷歌找了一下不太適用。后面找到一個別人修改好的JS，替換上去，修改一下頁面顯示即可使用，一下是部分代碼
HTML:
重慶分公司
重慶分公司
文件名
大小
上傳進度
狀態(tài)
操作
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) {//上傳進度回調(diào) value進度值
element.progress('demoList', value + '%')//設(shè)置頁面進度條
}, 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]; //刪除對應(yīng)的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現(xiàn)同名文件不可選
});
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
}///攜帶額外的數(shù)據(jù)
}
,
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: {} //設(shè)定異步數(shù)據(jù)接口的額外參數(shù)
//,height: 300
});
return delete this.files[index]; //刪除文件隊列已經(jīng)上傳成功的文件
} 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文件
下載地址:http://file.35youth.cn/index.php?share/file&user=1&sid=4VkDTZ8q?提取密碼:4st5H
作者：onlooker
來源：三無青年博客br
原文：https://www.35youth.cn/644.html
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
