問題描述：使用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"><iclass="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"><iclass="layui-icon layui-icon-upload-drag"></i>上傳文件</button><div class="layui-upload-list" style="height:25px;"></div></div> </form>

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

var data = {// 選擇文件按鈕IDaddUploadFileId: 'addUploadFile',// 確認上傳按鈕IDimpDataBtnId: '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）方法比較麻煩，還是分享以下，可暫時解決問題。

總結

以上是生活随笔為你收集整理的Layui上传文件时choose事件只触发一次的问题（两种解决方案+最终解决方案源码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。