关于layui upload上传组件上传文件无反应的问题

最近使用layui upload组件时,碰到了上传文件无反应的问题,感到非常困惑。

因为使用layui upload组件不是一次两次了,之前每次都可以,这次使用同样的配方,同样的姿势,为什么就不行了呢?

照例先百度一番,出来的文章都是说第二次上传同样的文件无反应的问题,这个有相应的解决方法。但是我的问题是第一次上传就不行,似乎没有人遇到过这个问题。

苦苦思索一番,依然无果。尝试不断怀疑各种之前已经被验证过的没问题的写法,没有任何效果。就只差怀疑人生了。

虽然搞得我几乎崩溃,但想让我就此放弃,那是不可能的。找出layui upload的源码,通过阅读源码来一步步分析,我的问题是点击按钮可以打开文件选择对话框,选择文件之后就没有任何反应。通过断点调试,发现是change事件没触发,就是这一句

    that.elemFile.on('change', function(){$(this).trigger('upload.change');});

为什么会不触发呢?这个change事件是绑定在

<input class="layui-upload-file" type="file" accept="" name="file">

这个文件上传组件上面的,其他文章里面提到的二次上传同样的文件无反应也是跟这里有关,因为这个input给value属性赋值为已选择的文件的路径,当第二次上传同样的文件因为路径相同,就不会处理。解决办法就是点击时给这个input的value赋值为空值。但是我这里的value值第一次的时候是空值,所以显然跟这个问题不一样。

不是这个问题那会是什么问题?change事件没绑定成功?什么情况下会导致事件绑定不成功?在源码中发现有这么一行

 // 防止事件重复绑定if(options.elem.data('haveEvents')) return;

设置完绑定事件后,

options.elem.data('haveEvents', true);

会给haveEvents赋值,下次就不会再次执行到绑定事件了。

然后我发现在我的代码中初始化的时候因为方法执行回调函数的原因,导致layui.upload.render被执行了两次,结合源代码,我发现我的问题是这样的:

第一次执行layui.upload.render,new了一个upload对象,动态创建<input type="file"/>文件上传组件,事件也是绑定在文件上传组件上面的。

第二次执行layui.upload.render,new了一个新的upload对象,动态创建一个新的<input type="file"/>文件上传组件,但是因为if(options.elem.data('haveEvents')) return;的阻止,事件绑定不上了。

原因找到了,如何解决呢?

其实layui文档里也写了,调用layui.upload.render时,会返回一个实例,我们保存这个实例,下次不要重复去调layui.upload.render就可以了,要调整参数通过实例去调reload方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/91518.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【图像分割】图像检测(分割、特征提取)、各种特征(面积等)的测量和过滤(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

蓝牙核心规范(V5.4)11.6-LE Audio 笔记之初识音频位置和通道分配

专栏汇总网址:蓝牙篇之蓝牙核心规范学习笔记(V5.4)汇总_蓝牙核心规范中文版_心跳包的博客-CSDN博客 爬虫网站无德,任何非CSDN看到的这篇文章都是盗版网站,你也看不全。认准原始网址。!!! 音频位置 在以前的每个蓝牙音频规范中,只有一个蓝牙LE音频源和一个蓝牙LE音频接…

Python函数式编程(三)操作符函数(operator)

operator 模块提供了一套与Python的内置运算符对应的高效率函数。例如&#xff0c;operator.add(x, y) 与表达式 xy 相同。 许多函数名与特殊方法名相同&#xff0c;只是没有双下划线。为了向后兼容性&#xff0c;也保留了许多包含双下划线的函数。为了表述清楚&#xff0c;建议…

跳转传参的方式

在Web开发中&#xff0c;跳转传参的方式有以下几种&#xff1a; 1.查询字符串(Query String)&#xff1a;通过URL的查询字符串传递参数。可以在URL后面添加?符号&#xff0c;然后以键值对的形式传递参数&#xff0c;不同参数之间使用&符号分隔。 示例&#xff1a; // 跳…

node版本问题:Error: error:0308010C:digital envelope routines::unsupported

前言 出现这个错误是因为 node.js V17及以后版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响. 在node.js V17以前一些可以正常运行的的应用程序,但是在 V17 及以后版本可能会抛出以下异常: 我重装系统前,用的…

三个要点,掌握Spring Boot单元测试

单元测试是软件开发中不可或缺的重要环节&#xff0c;它用于验证软件中最小可测试单元的准确性。结合运用Spring Boot、JUnit、Mockito和分层架构&#xff0c;开发人员可以更便捷地编写可靠、可测试且高质量的单元测试代码&#xff0c;确保软件的正确性和质量。 一、介绍 本文…

【自学记录】深度学习入门——基于Python的理论与实现(第4章 神经网络的学习)

4.2 损失函数 #损失函数 #均方误差 def mean_squared_error(y,t):return 0.5*np.sum((y-t)**2) #交叉熵误差 def _cross_entropy_error(y,t):delta1e-7return -np.sum(t*np.log(ydelta))#交叉熵损失函数 def cross_entropy_error(y,t):if y.ndim1:tt.reshape(1,t.size)yy.resh…

Lua学习笔记:require非.lua拓展名的文件

前言 本篇在讲什么 Lua的require相关的内容 本篇需要什么 对Lua语法有简单认知 对C语法有简单认知 依赖Visual Studio工具 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#xff0c;快速上手 提供全流程的源码内容 ★提高阅读体验★ &#x1f449; ♠…

uni-app 之 短信验证码登录

uni-app 之 短信验证码登录 image.png image.png <template><view style"width: 100%; display: flex; flex-direction:column; align-items:center;"><view style"width: 300px; margin-top: 100px;"><!-- // --><!-- 1&#…

uni-app:实现密码框内容展示与隐藏

效果 代码 <template><view class"container"><view class"item_left"><view>密码</view><view class"eye_position" taptoggleShowPassword><image :srceye v-ifisShowPassword /><image :srcey…

DBRichEdit关联ClientDataSet不能保存的Bug

ClientDataSet的最大好处&#xff0c;就是建立能内存表&#xff0c;特别DataSnap三层运用中&#xff0c;主要使用ClientDataSet与运程的服务器中的数据表&#xff0c;建立读取存贮关系。 在软件的使用中&#xff0c;总有客户反映&#xff0c;一些数据不能保存。 发现都是使用DB…

Springboot中使用拦截器、过滤器、监听器

一、Servlet、Filter&#xff08;过滤器&#xff09;、 Listener&#xff08;监听器&#xff09;、Interceptor&#xff08;拦截器&#xff09; Javaweb三大组件&#xff1a;servlet、Filter&#xff08;过滤器&#xff09;、 Listener&#xff08;监听器&#xff09; Spring…

nodejs在pdf中绘制表格

需求 之前我已经了解过如何在pdf模板中填写字段了 nodejs根据pdf模板填入中文数据并生成新的pdf文件https://blog.csdn.net/ArmadaDK/article/details/132456324 但是当我具体使用的时候&#xff0c;我发现我的模板里面有表格&#xff0c;表格的长度是不固定的&#xff0c;所…

Bluespec SytemVerilog 握手协议接口转换

01、引言 由于接口控制信号上的差异&#xff0c;要实现Bluespec SystemVerilog(BSV)生成的代码和外部Verilog代码之间的正确交互是一件比较麻烦同时容易出错的事情。在BSV中, 模块之间的交互都是基于Action或ActionValue这两类method完成。下图展示了使用BSV设计的某一模块的接…

git 误删分支恢复方法

在使用git的过程中&#xff0c;因为人为因素造成分支&#xff08;commit)被删除&#xff0c;可以使用以下步骤进行恢复。 首先用以下步骤创建一个新分支&#xff0c;修改一些文件后删除&#xff0c;以便进行恢复。 1.创建分支 abc git branch abc2.查看分支列表 git branch …

深度学习在图像识别领域还有哪些应用?

深度学习在图像识别领域的应用非常广泛&#xff0c;除了之前提到的图像分类、目标检测、语义分割和图像生成&#xff0c;还有其他一些应用。 图像超分辨率重建&#xff1a;深度学习技术可以用于提高图像的分辨率&#xff0c;例如通过使用生成对抗网络&#xff08;GAN&#xff…

RK3588安装python3.11(ubuntu18.04)

1.前言 看到rknn_toolkit_lite2更新了python3.11的安装包&#xff0c;马上更新一下 2.RK3588安装python3.11 Ubuntu上编译Python 3.11&#xff0c;您可以按照以下步骤进行操作&#xff1a; (1) 准备编译环境 在开始之前&#xff0c;确保您的系统已安装必要的编译工具和依赖项…

【JavaEE】HTML

JavaWeb HTML 超文本标记语言 超文本&#xff1a;文本、声音、图片、视频、表格、连接标记&#xff1a;有许许多多的标签组成 vscode开发工具搭建 因为我使用的IDEA是社区版&#xff0c;代码高亮补全缩进都有些问题&#xff0c;使用vscode是最好的选择~ 安装 Visual Stu…

聊聊并发编程——并发容器和阻塞队列

目录 一.ConcurrentHashMap 1.为什么要使用ConcurrentHashMap&#xff1f; 2.ConcurrentHashMap的类图 3.ConcurrentHashMap的结构图 二.阻塞队列 Java中的7个阻塞队列 ArrayBlockingQueue&#xff1a;一个由数组结构组成的有界阻塞队列。 LinkedBlockingQueue&#xf…

jvm笔记

好处&#xff1a; 跨平台 内存管理机制&#xff0c;垃圾回收功能 数组下标越界检查 多态 名词解释&#xff1a; jvm java虚拟机&#xff0c;是java程序的运行环境 jre jvm基础类库 jdk jre编译工具 javase jdkide工具 javaee javase应用服务器 jvm的内存结构&#xff1a; 程序…