layui上传文件choose只触发一次的解决方法

环境:.net core + layui

场景:上传文件的时候需要先弹出一个层选择对应的条件传到上传方法里面做逻辑,发现layui.upload上传一次之后在不刷新页面的前提下不会执行choose方法了;

问题原理:个人理解是upload.render方法执行一次之后,第二次之后没有把elem指定的这个元素对象重新生成,而是有选择性的更新对象的属性,比如file就应该没更新,还是上一次的file导致change方法没触发;

解决方法:

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

示例:

复制代码
复制代码
 1 //初始化上传控件
 2     var InitUpload = function () {
 3         //submitbtngroup 这个是上传按钮的父节点   动态添加上传按钮   解决上传一次之后choose方法不执行的bug
 4         $("#submitbtngroup").append('<button class="layui-btn layui-btn-normal" lay-submit lay-filter="chooseFile" id="chooseFile">上传文件</button>');
 5         //导入数据按钮事件
 6         var uploadInst = upload.render({ //允许上传的文件后缀
 7             elem: '#chooseFile'
 8             , url: '/xxxx/xxxx'
 9             , accept: 'file' //普通文件
10             , exts: 'xlsx|xls' //只允许上传excel文件
11             , done: function (res) {
12 
13                 //每次执行之后都删除上传按钮   在前面重新加
14                 $("#chooseFile").remove();
15             }
16         });
17     }
复制代码
复制代码
posted @   LuoCore  阅读(482)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示