Layui上传文件时choose事件只触发一次的问题（两种解决方案+最终解决方案源码）

问题描述：使用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"><iclass="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"><iclass="layui-icon layui-icon-upload-drag"></i>上传文件</button><div class="layui-upload-list" style="height:25px;"></div></div>
</form>

js脚本也是只贴相关代码，懂的都懂，是吧

Layui上传文件时choose事件只触发一次的问题（两种解决方案+最终解决方案源码）相关推荐

解决使用layui上传文件时提示“请求上传接口出现异常”
在做网站的过程中,需要用户上传文件,接收文件的接口已经写好(经过测试确定可用) 现在需要在网页上提供一个文件上传的按钮.由于原生input type="file"组件太丑,考虑使用 ...
layui上传文件时显示正在加载
一,声明全局变量 var loadingIndex; 二, 在上传按钮点击事件中添加 //在上传按钮点击事件中添加 loadingIndex = layer.load(1, {shade: [0.5, ...
smartupload 上传文件时把页面编码改成gbk 解决乱码
快来java1234 吧 smartupload 上传文件时,经常会发生因为把表单设置为 enctype="multipart/form-data"而出现的中文乱码问题,本人头疼好 ...
IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
IE浏览器上传文件时本地路径变成"C:\fakepath\"的问题博客分类: javascript HTML 在使用<input id="file_upl&quo ...
上传文件时，文件名中文乱码
遇到了一个问题,在开发时上传文件时,文件的中文名上传的是中文乱码,所解决方法: 文章转载自:https://blog.csdn.net/lengjinghk/article/details/51938 ...
解决上传文件时 nginx 413 Request Entity Too Large 错误
一个使用Tomcat 发布的站点,使用Nginx做了代理,在上传文件时发生以下错误: <html> <head><title>413 Request Entity ...
hdfs dfs -put_通过HDFS中的`hdfs dfs -put`命令行上传文件时，如何设置一个文件的复制因子？...
hdfs dfs -put When uploading a file by the hdfs dfs -put command line in HDFS, how to set a replicat ...
解决ServletFileUpload上传文件时,获取上传文件名出现中文乱码问题
解决ServletFileUpload上传文件时,获取上传文件名出现中文乱码问题在我们使用ServletFileUpload上传文件时,我们通常会获取其上传的文件名,然而当文件名包含中文时,便可能出 ...
阿里云OSS上传文件时,如何显示上传网速
阿里云OSS上传文件时,如何显示上传网速业务场景用户上传时,网速很慢,或者在上传大文件时,虽然有进度条,但是动的很慢,或者不明显,用户会产生困惑. 所以就产生了一个显示网速的需求点. 实现方式 E ...

Layui上传文件时choose事件只触发一次的问题（两种解决方案+最终解决方案源码）

1.使用uploadListIns.config.elem.next()[0].value = ‘’

2.元素动态添加

3.动态绑定元素

Layui上传文件时choose事件只触发一次的问题（两种解决方案+最终解决方案源码）相关推荐

最新文章

热门文章