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
