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