Layui上傳文件時choose事件只觸發一次的問題（兩種解決方案+最終解決方案源碼）

Layui上傳文件時choose事件只觸發一次的問題（兩種解決方案+最終解決方案源碼）

シ風箏 2021-06-22 14:26:48  334  收藏 2
文章標簽： javascript
版權
問題描述：使用layui的組件實現的文件列表添加和上傳，第一次彈出此頁面，可添加多個文件，點擊上傳，可以成功上傳，但再次彈出此頁面時，添加文件無法觸發choose方法，上傳依然是正常的，話不多說，看解決方法。

 

 

說明：我不是前端開發工程師，所以在博客上尋找解決方法，最終成功解決，感謝大家的分享。

1.使用uploadListIns.config.elem.next()[0].value = ‘’
說實話我不知道這個方法的底層是怎么樣的，但是這種方案在我的頁面里是失效的。

 initUploadList: function () {
        var uploadListIns = upload.render({
            elem: '#id',
            accept: 'file',
            exts: 'xlsx|xls|csv',
            multiple: true,
            auto: false,
            bindAction: '#btnId',
            choose: function (obj) {
                uploadListIns.config.elem.next()[0].value = '';

2.元素動態添加
原文鏈接 https://www.cnblogs.com/easyou/p/12876615.html 這個方案是可以解決choose只觸發一次的問，但是我的前端頁面按鈕是在上邊，我不知道如何添加到我的頁面位置，這個解決方案使我明白，元素一旦綁定，事件觸發后就無法再次觸發，動態綁定相當於重新初始化，受此啟發，就出現了第三種比較復雜的方案。

        //初始化上傳控件
        var InitUpload = function () {
            //submitbtngroup 這個是上傳按鈕的父節點   動態添加上傳按鈕   解決上傳一次之后choose方法不執行的bug
            $("#submitbtngroup").append('<button class="layui-btn layui-btn-normal" lay-submit lay-filter="chooseFile" id="chooseFile">上傳文件</button>');
            //導入數據按鈕事件
            var uploadInst = upload.render({ //允許上傳的文件后綴
                elem: '#chooseFile',
                url: '/xxxx/xxxx',
                accept: 'file',
                done: function (res) {
                    //每次執行之后都刪除上傳按鈕   在前面重新加
                    $("#chooseFile").remove();
                }
            });
        }

3.動態綁定元素
我只貼相關代碼，無關的代碼就不放了。前端form頁面，兩個動態綁定的按鈕（addUploadFile-0，impDataBtn-0）

<!-- 添加上傳文件表單 -->
<form class="layui-form" style="display: none ;margin-top: 20px" id="addUploadFileForm" action="">
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="addUploadFile-0" style="margin-left:30px"><i
                class="layui-icon layui-icon-add-circle"></i>選擇文件
        </button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>狀態</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="uploadList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn layui-btn-normal " id="impDataBtn-0" style="margin-left:30px"><i
                class="layui-icon layui-icon-upload-drag"></i>上傳文件
        </button>
        <div class="layui-upload-list" style="height:25px;"></div>
    </div>
</form>

js腳本也是只貼相關代碼，懂的都懂，是吧 😃

var data = {
    // 選擇文件按鈕ID
    addUploadFileId: 'addUploadFile',
    // 確認上傳按鈕ID
    impDataBtnId: 'impDataBtn',
    // 上傳初始化次數
    initUploadListNum: 0
};
var methods = {
 initUploadList: function () {

        // 初始化時重新綁定按鈕對象
        var elemStr = '#' + data.addUploadFileId + '-' + data.initUploadListNum;
        var impDataBtnStr = '#' + data.impDataBtnId + '-' + data.initUploadListNum;
        
        var uploadListIns = upload.render({
            elem: elemStr,
            url: '../../uploadFile',
            accept: 'file',
            exts: 'xlsx|xls|csv',
            multiple: true,
            auto: false,
            bindAction: impDataBtnStr,
            choose: function (obj) {
            // 省略了一些代碼
            },
            before: function () {
                // 點擊上傳后修改綁定對象的ID，使其可以重新初始化
                data.initUploadListNum += 1;
                $(elemStr).id = '#' + data.addUploadFileId + '-' + data.initUploadListNum;
                $(impDataBtnStr).id = '#' + data.impDataBtnId + '-' + data.initUploadListNum;
            }
        })
    }
};

主要是動態綁定兩個按鈕元素（elem，bindAction）方法比較麻煩，還是分享以下，可暫時解決問題。
————————————————
版權聲明：本文為CSDN博主「シ風箏」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_39168541/article/details/118105414