layui 多文件上傳帶進度條踩坑

時間 2020-02-07

標籤 layui 文件上傳帶進简体版

原文原文鏈接

原文連接地址爲https://my.oschina.net/u/3656204/blog/3086255。
原文做者提供的upload.js文件，html和js方法都可借鑑，問題是按做者的搞下來，卻未能成功。可坑啦，完成了98%,剩下的2%卻好難搞出來。html

踩坑以下：坑一web

toUpload?id=5221282942990596404:227 Uncaught ReferenceError: xhrOnProgress is not defined ajax

做者給了較爲完成的js方法，卻把方法中關鍵的一個自定義變量方法漏了。
xhrOnProgress應該定義以下：
閉包

var xhrOnProgress = function (fun) {
            xhrOnProgress.onprogress = fun; //綁定監聽
            //使用閉包實現監聽綁
            return function () {
                //經過$.ajaxSettings.xhr();得到XMLHttpRequest對象
                var xhr = $.ajaxSettings.xhr();
                //判斷監聽函數是否爲函數
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //若是有監聽函數而且xhr對象支持綁定時就把監聽函數綁定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }

坑二

圖片上傳成功了，請求後臺方法了，但進度條始終不動。
問題出在layui引用模塊。由於引用了自定義的upload.js，因此在layui.use裏不須要再加載‘upload’模塊了。
應去掉途中的upload

代碼以下app

var upload
    layui.use(['element', 'form','layer'], function () {
        var id = "${id}"
        upload = layui.upload
        var element = layui.element;
        var xhrOnProgress = function (fun) {
            xhrOnProgress.onprogress = fun; //綁定監聽
            //使用閉包實現監聽綁
            return function () {
                //經過$.ajaxSettings.xhr();得到XMLHttpRequest對象
                var xhr = $.ajaxSettings.xhr();
                //判斷監聽函數是否爲函數
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //若是有監聽函數而且xhr對象支持綁定時就把監聽函數綁定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }

        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: '${ctx}/contract/contract/uploadAppendix'
            , accept: 'file'
            , multiple: false
            , 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 = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td><div class="layui-progress layui-progress-big" lay-filter="progress_' + index + '" lay-showPercent="true"><div class="layui-progress-bar" lay-percent="58%"></div></div></td>'
                        , '<td>等待上傳</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重傳</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">刪除</button>'
                        , '</td>'
                        , '</tr>'].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 = {
                    "id": 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('<span style="color: #5FB878;">上傳成功</span>');
                    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('<span style="color: #FF5722;">上傳失敗</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
            }
        })

    })

去掉後執行效果以下，終於有進度條進度了。異步

html代碼也貼出來吧，能夠去複製原網頁的。
原網址： https://my.oschina.net/u/3656204/blog/3086255。
請到原網址提供的百度盤去下載upload.js文件。ide

<div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="fileList">選擇多文件</button>
                <div class="layui-progress">
                    <div class="layui-progress-bar" lay-filter="aaaa" lay-percent="10%"></div>
                </div>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>上傳進度</th>
                            <th>狀態</th>
                            <th>操做</th>
                        </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="fileListAction">開始上傳</button>
            </div>

坑三注意layui.js和upload.js的引用順序
必定是layui.js在前，upload.js在後，不然呢。render方法一直會異常。
函數

總結：若提供一個問題的解決方法請儘量的詳細，代碼中一個變量一個標點符號的缺失均可能致使整塊程序不可用。本想給予幫助，缺讓使用人搞了半天也沒用上。
能夠爲後人栽樹，但不能在樹上掛刀啊。。。(^__^) 嘻嘻……ui