layui弹框中的文件上传问题记录

最新推荐文章于 2023-07-13 11:07:59 发布

lijingjingjing22

最新推荐文章于 2023-07-13 11:07:59 发布

阅读量1.6k

点赞数

分类专栏： layui 文章标签： layui upload

本文链接：https://blog.youkuaiyun.com/lijingjingjing22/article/details/116453776

版权

本文记录了使用layui弹框进行文件上传时遇到的问题及解决方案，包括：upload.render方法在不刷新页面下不再执行choose方法的问题，layui文件上传前如何进行条件判断，如何清空input file值以允许重新选择文件，以及限制文件类型后如何避免不支持格式的文件选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.上传文件的时候需要先弹出一个层再选择文件进行上传，发现layui.upload上传一次或者关闭弹框之后在不刷新页面的前提下不会执行choose方法了；

原因可能是upload.render方法执行一次之后，第二次没有把elem指定的这个元素对象重新生成，而是有选择性的更新对象的属性，比如file就应该没更新，还是上一次的file导致change方法没触发；

最简单的是把elem指定的这个元素变成动态添加，而不是先在页面写死；

                        var initUpload = function () {
                            $('#uploadElem').html(`<div id="uploadBox"><button                             
                             type="button" class="layui-btn" id="test1">
                                <i class="layui-icon">&#xe67c;</i>选择excel文件
                            </button><span id="selected"></span></div>`);
                            var uploadInst = upload.render({
                                elem: '#test1', //绑定元素