问题描述：使用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）方法比较麻烦，还是分享以下，可暂时解决问题。
