当前位置: 首页 > news >正文

关于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方法。

相关文章:

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

最近使用layui upload组件时&#xff0c;碰到了上传文件无反应的问题&#xff0c;感到非常困惑。 因为使用layui upload组件不是一次两次了&#xff0c;之前每次都可以&#xff0c;这次使用同样的配方&#xff0c;同样的姿势&#xff0c;为什么就不行了呢&#xff1f; 照例先…...

容器网络之Flannel

​ 第一个问题位置变化&#xff0c;往往是通过一个称为注册中心的地方统一管理的&#xff0c;这个是应用自己做的。当一个应用启动的时候&#xff0c;将自己所在环境的 IP 地址和端口&#xff0c;注册到注册中心指挥部&#xff0c;这样其他的应用请求它的时候&#xff0c;到指挥…...

SVM(下):如何进行乳腺癌检测?

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ 🐴作者:秋无之地 🐴简介:CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作,主要擅长领域有:爬虫、后端、大数据开发、数据分析等。 🐴欢迎小伙伴们点赞👍🏻、收藏⭐️、…...

嵌入式Linux应用开发-第十五章具体单板的按键驱动程序

嵌入式Linux应用开发-第十五章具体单板的按键驱动程序 第十五章 具体单板的按键驱动程序(查询方式)15.1 GPIO操作回顾15.2 AM335X的按键驱动程序(查询方式)15.2.1 先看原理图确定引脚及操作方法15.2.2 再看芯片手册确定寄存器及操作方法15.2.3 编程15.2.3.1 程序框架15.2.3.2 硬…...

MySQL体系结构和四层架构介绍

MySQL体系结构图如下&#xff1a; 四层介绍 1. 连接层&#xff1a; 它的主要功能是处理客户端与MySQL服务器之间的连接(比如Java应用程序通过JDBC连接MySQL)。当客户端应用程序连接到MySQL服务器时&#xff0c;连接层对用户进行身份验证、建立安全连接并管理会话状态。它还处理…...

【产品运营】如何做好B端产品规划

产品规划是基于当下掌握的多维度信息&#xff0c;为追求特定目的&#xff0c;而制定的产品资源投入计划。 产品规划是基于当下掌握的多维度信息&#xff08;客户需求、市场趋势、竞争对手、竞争策略等&#xff09;&#xff0c;为追求特定目的&#xff08;商业增长、客户满意等&…...

ruoyi-启动

1 springboot 版本 git 地址 ruoyi-vue-pro: &#x1f525; 官方推荐 &#x1f525; RuoYi-Vue 全新 Pro 版本&#xff0c;优化重构所有功能。基于 Spring Boot MyBatis Plus Vue & Element 实现的后台管理系统 微信小程序&#xff0c;支持 RBAC 动态权限、数据权限…...

select完成服务器并发

服务器 #include <myhead.h>#define PORT 4399 //端口号 #define IP "192.168.0.191"//IP地址//键盘输入事件 int keybord_events(fd_set readfds); //客户端交互事件 int cliRcvSnd_events(int , struct sockaddr_in*, fd_set *, int *); //客户端连接事件 …...

初级篇—第四章聚合函数

文章目录 聚合函数介绍聚合函数介绍COUNT函数AVG和SUM函数MIN和MAX函数 GROUP BY语法基本使用使用多个列分组WITH ROLLUP HAVING基本使用WHERE和HAVING的对比开发中的选择 SELECT的执行过程查询的结构SQL 的执行原理 练习流程函数 聚合函数介绍 聚合函数作用于一组数据&#x…...

计算机图像处理-中值滤波

非线性滤波 非线性滤波是利用原始图像跟模版之间的一种逻辑关系得到结果&#xff0c;常用的非线性滤波方法有中值滤波和高斯双边滤波&#xff0c;分别对应cv2.medianBlur(src, ksize)方法和cv2.bilateralFilter(src, d, sigmaColor, sigmaSpace[, dst[, borderType]])方法。 …...

Golang中的包和模块设计

Go&#xff0c;也被称为Golang&#xff0c;是一种静态类型、编译型语言&#xff0c;因其简洁性和对并发编程的强大支持而受到开发者们的喜爱。Go编程的一个关键方面是其包和模块系统&#xff0c;它允许创建可重用、可维护和高效的代码。本博客文章将深入探讨在Go中设计包和模块…...

web:[极客大挑战 2019]Upload

题目 页面显示为一个上传&#xff0c;猜测上传一句话木马文件 先查看源代码看一下有没有有用的信息&#xff0c;说明要先上传图片&#xff0c;先尝试上传含有一句话木马的图片 构造payload <?php eval($_POST[123]);?> 上传后页面显示为&#xff0c;不能包含<&…...

ICMP差错包

ICMP报文分类 Type Code 描述 查询/差错 0-Echo响应 0 Echo响应报文 查询 3-目的不可达 0 目标网络不可达报文 差错 1 目标主机不可达报文 差错 2 目标协议不可达报文 差错 3 目标端口不可达报文 差错 4 要求分段并设置DF flag标志报文 差错 5 源路由…...

算法基础课第二部分

算法基础课 第四讲 数学知识AcWing1381. 阶乘(同余&#xff0c;因式分解) 质数AcWing 866. 质数的判定---试除法AcWing 868. 质数的判定---埃氏筛AcWing867. 分解质因数---试除法AcWing 197. 阶乘---分解质因数---埃式筛 约数AcWing 869. 求约数---试除法AcWing 870. 约数个数-…...

【数据结构】外部排序、多路平衡归并与败者树、置换-选择排序(生成初始归并段)、最佳归并树算法

目录 1、外部排序 1.1 基本概念 1.2 方法 2、多路平衡归并与败者树 2.1 K路平衡归并 2.2 败者树 3、置换-选择排序&#xff08;生成初始归并段&#xff09;​编辑 4、最佳归并树 4.1 理论基础​编辑 4.2 构造方法 ​编辑 5、各种排序算法的性质 1、外部排序 1.1 基本概…...

抽象工厂模式 创建性模式之五

在看这篇文章之前&#xff0c;请先看看“简单工厂模式”和“工厂方法模式”这两篇博文&#xff0c;会更有助于理解。我们现在已经知道&#xff0c;简单工厂模式就是用一个简单工厂去创建多个产品&#xff0c;工厂方法模式是每一个具体的工厂只生产一个具体的产品&#xff0c;然…...

servlet如何获取PUT和DELETE请求的参数

1. servlet为何不能获取PUT和DELETE请求的参数 Servlet的规范是POST的数据需要转给request.getParameter*()方法&#xff0c;没有规定PUT和DELETE请求也这么做 The Servlet spec requires form data to be available for HTTP POST but not for HTTP PUT or PATCH requests. T…...

【Vue.js】使用Element中的Mock.js搭建首页导航左侧菜单---【超高级教学】

一&#xff0c;Mock.js 1.1 认识Mock.js Mock.js是一个用于前端开发中生成随机数据、模拟接口响应的 JavaScript 库。模拟数据的生成器&#xff0c;用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率 总结来说&#xff0c;Element中的Mock.js是一个用于…...

从技术创新到应用实践,百度智能云发起大模型平台应用开发挑战赛!

大模型已经成为未来技术发展方向的重大变革&#xff0c;热度之下更需去虚向实&#xff0c;让技术走进产业场景。在这样的背景下&#xff0c;百度智能云于近期发起了“百度智能云千帆大模型平台应用开发挑战赛”。 挖掘大模型落地应用 千帆大模型平台应用开发挑战赛启动 在不久前…...

简单三步 用GPT-4和Gamma自动生成PPT PDF

1. 用GPT-4 生产PPT内容 我想把下面的文章做成PPT&#xff0c;请你给出详细的大纲和内容 用于谋生的知识&#xff0c;学生主要工作是学习&#xff0c;成年人的工作是养家糊口&#xff0c;这是基本的要求&#xff0c;在这之上&#xff0c;才能有更高的追求。 不要短期期望过高…...

QT设置弹窗显示屏幕中央

Qt设置每次运行弹窗显示屏幕中央 要确保Qt应用程序中的弹出窗口每次都显示在屏幕的中央&#xff0c;您可以使用以下方法&#xff1a; 使用QMessageBox的move方法手动设置窗口位置&#xff1a; #include <QApplication> #include <QMessageBox> #include <QDesk…...

正点原子嵌入式linux驱动开发——STM32MP1启动详解

STM32单片机是直接将程序下载到内部 Flash中&#xff0c;上电以后直接运行内部 Flash中的程序。 STM32MP157内部没有供用户使用的 Flash&#xff0c;系统都是存放在外部 Flash里面的&#xff0c;比如 EMMC、NAND等&#xff0c;因此 STM32MP157上电以后需要从外部 Flash加载程序…...

FPGA的数字钟带校时闹钟报时功能VHDL

名称&#xff1a;基于FPGA的数字钟具有校时闹钟报时功能 软件&#xff1a;Quartus 语言&#xff1a;VHDL 要求&#xff1a; 1、计时功能:这是数字钟设计的基本功能&#xff0c;每秒钟更新一次,并且能在显示屏上显示当前的时间。 2、闹钟功能:如果当前的时间与闹钟设置的时…...

分析各种表达式求值过程

目录 算术运算与赋值 编译器常用的两种优化方案 常量传播 常量折叠 加法 Debug编译选项组下编译后的汇编代码分析 Release开启02执行效率优先 减法 Release版下优化和加法一致&#xff0c;不再赘述 乘法 除法 算术结果溢出 自增和自减 关系运算与逻辑运算 JCC指…...

企业风险管理策略终极指南

企业风险管理不一定是可怕的。企业风险管理是一个模糊且难以定义的主题领域。它涵盖了企业的多种风险和程序&#xff0c;与传统的风险管理有很大不同。 那么&#xff0c;企业风险管理到底是什么&#xff1f;在本文中&#xff0c;我们将确定它是什么&#xff0c;提出两种常见的…...

OpenCV之分水岭算法(watershed)

Opencv 中 watershed函数原型&#xff1a; void watershed( InputArray image, InputOutputArray markers ); 第一个参数 image&#xff0c;必须是一个8bit 3通道彩色图像矩阵序列&#xff0c;第一个参数没什么要说的。关键是第二个参数 markers&#xff0c;Opencv官方文档的说…...

npm 命令

目录 初始化 搜索 安装 删除 更新 换源 查看 其他 补充 1.初始化 npm init #初始化一个package.json文件 npm init -y | npm init --yes 2.搜索 npm s jquery | npm search jquery 3.安装 npm install npm -g #更新到最新版本 npm i uniq | npm ins…...

【bug 记录】yolov5_C_demo 部署在 rv1126

问题1&#xff1a;opencv find 不到 在 CMakeLists 中将正确的 OpenCV库 路径添加到 CMAKE_PREFIX_PATH 变量中 set(CMAKE_PREFIX_PATH “/mnt/usr/local” ${CMAKE_PREFIX_PATH}) 问题2&#xff1a; rknn_api.h 找不到 将该文件从别处复制到项目 include 文件夹 问题3&…...

[vue-admin-template实战笔记]

1.克隆项目 git clone gitgitee.com:panjiachen/vue-admin-template.git 2.安装依赖 npm install 3.运行项目就会自动打开网页&#xff0c;并且热部署插件 npm run dev 4.查看代码 //将vue-admin-template拖入到idea中即可查看代码 1)并且发现&#xff0c;常用的东西已经集…...

unity 限制 相机移动 区域(无需碰撞检测)

限制功能原著地址&#xff1a;unity限制相机可移动区域&#xff08;box collider&#xff09;_unity限制相机移动区域_manson-liao的博客-CSDN博客 一、创建限制区域 创建一个Cube&#xff0c;Scale大小1&#xff0c;添加组件&#xff1a;BoxCollder&#xff0c;调整BoxColld…...

中山 网站建设一条龙全包/太原关键词排名推广

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️&#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…...

怎么用qq邮箱做网站/cps广告联盟网站

Oracle 1、Oracle的体系结构 2、Oracle的存储结构 分为物理存储结构和逻辑存储结构&#xff0c;如下图&#xff1a; 物理存储&#xff1a; 控制文件(.ctl)、日志文件(.log)、数据文件(.dbf/.ora) 数据文件&#xff1a; 数据文件时数据库的物理存储单位。 数据库的数据是存…...

网站建设公司项目介绍/产品经理培训

在管理集群时&#xff0c;最容易导致hbase节点发生故障的恐怕就是hbase region split和compact的了&#xff0c;日志有split时间太长&#xff1b;文件找不到&#xff1b;split的时候response too slow等等&#xff0c;所以先看看hbase region split源码&#xff0c;希望对以后能…...

如何搜名字搜到自己做的网站/市场调研与分析

题目链接: https://www.nowcoder.com/practice/9d1559511b3849deaa71b576fa7009dc?tpId85&&tqId29842&rp1&ru/activity/oj&qru/ta/2017test/question-ranking 解题思路: 回文意思就是从前往后和从后往前是一样的 利用str3.insert(i, str2); 将题目中要求…...

房建设计网站好/shopify seo

1.路由信息是由{目的主机所在的网络地址&#xff0c;下一跳地址&#xff0c;子网掩码}组成 route add –net 192.168.1.0 gw 192.168.1.1 netmask 255.255.255.0 metric 1 2.如果C类子网的掩码为255.255.255.240&#xff0c;则包含的子网位数、子网数目、每个子网中的主机数目 …...

哈佛门户网站建设特点/志鸿优化设计

文章目录一、HTTPS 是什么二、"加密" 是什么三、HTTPS 的工作过程3.1 引入对称加密3.2 引入非对称加密3.3 引入证书四、总结一、HTTPS 是什么 HTTPS 也是一个应用层协议&#xff0c;与HTTP是孪生兄弟. 是在 HTTP 协议的基础上引入了一个加密层(SSL/TLS). HTTP 协议…...