Layui原生upload模塊不支持文件上傳進度條顯示，百度，谷歌找了一下不太適用。后面找到一個別人修改好的JS，替換上去，修改一下頁面顯示即可使用，一下是部分代碼

為湘橋等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及湘橋網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、做網(wǎng)站、湘橋網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

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)載請附上博文鏈接！