input输入框file类型第二次不触发onchange事件的解决办法,简单有效
在网上看了很多办法,现在将网上大部分说法总结如下:
网上说法:
原因:选择一次后onchange事件没有绑定到input标签上;
解决办法:拷贝一份input标签的副本,每次选择后对原input标签进行替换。
我觉得网上给出的办法每次都要做回调,太麻烦了。应该还有更简单的做法。
探究input输入框file类型第二次不触发onchange事件的根本原因,可以知道:(1) 原来是 ajaxFileUpload 插件造成的,它会把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了。(2)上传时,当第二次点击同一个文件,由于value值没有发生变化,无法触发change/onchange事件。
所以,问题的关键是input 的value 值!!!
我的做法:
只需要在选择一次后将input标签的value属性置为空即可,即$('#inputId').val('')
,简单粗暴有效。
input输入框file类型第二次不触发onchange事件的解决办法,简单有效的更多相关文章
- 中文输入法不触发onkeyup事件的解决办法
当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发. 方法:o ...
- 改变input的值不会触发change事件的解决思路
通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...
- log file sync 等侍值高的一般通用解决办法
log file sync等待时间发生在redo log从log buffer写入到log file期间. 下面对log file sync做个详细的解释. 何时发生日志写入: 1.commit或者r ...
- vim编辑时遇到E325: ATTENTION Found a swap file by the name "./.backu.sh.swp"错误代码的解决办法
vim编辑时遇到E325: ATTENTION Found a swap file by the name "./.backu.sh.swp"错误代码的解决办法 重点:解决方法是: ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式
vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式 #Region "WPF 当浏览器窗体关闭 ...
- JS事件 文本框内容改变事件(onchange)通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。
文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...
- 组件/ 外层数据初始化时候,不应该触发 on-change 事件
组件/ 外层数据初始化时候,不应该触发 on-change 事件 watch: { value (value) { this.noOnChange = true // 外层传值 不触发on-chang ...
- 将input type="file" 类型的图片文件转成base64
带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了.话不多少,看代码: 首先定义一个类型为file的input标签 ...
随机推荐
- 创建Pods私有库
Pods私有库创建步骤 创建私有 Spec Repo 创建Pod项目工程文件 创建podspec文件 本地测试podsspec文件 向Spec Repo提交podspec Pod库使用 更新维护pos ...
- delphi中OleContainer的使用总结
1:定义流的header , OleContainer要求流中要有Headertype //流Header的结构 TStreamHeader = record Signature: Integer; ...
- hdu 1.3.4 shǎ崽 OrOrOrOrz
简单的排序,注意输出即可 #include <iostream> #include <algorithm> using namespace std; int main() { ...
- UWP 响应键盘组合快捷键
方法1:响应Ctrl+?快捷键 首先在load事件或者keydown事件内注册事件 public MainPage() { this.InitializeComponent(); // Registe ...
- [Ynoi2019模拟赛]Yuno loves sqrt technology II(二次离线莫队)
二次离线莫队. 终于懂了 \(lxl\) 大爷发明的二次离线莫队,\(\%\%\%lxl\) 二次离线莫队,顾名思义就是将莫队离线两次.那怎么离线两次呢? 每当我们将 \([l,r]\) 移动右端点到 ...
- Python 私有变量中两个下划线 _ _item 与 一个下划线的区别 _item
python中没有常量的说法, 但是可以通过元组实现一个常量 在python的私有变量中, 存在两个下划线 _ _item 与一个下划线 _item 的区别 前面带两个下划线的私有变量: 只能在本类中 ...
- Docker - Docker与Vagrant的区别
Docker Docker - HomePage Wiki - Docker Docker简介 Overview Docker 是一个开源的应用容器引擎,基于 Go 语言并遵从 Apache2.0 协 ...
- mxonline 总结
课程相关 课程列表 课程的剪接 课程详情 课程章节 课程关联的授课机构,课程关联的授课教师 热门课程 相关课程推荐 课程留言 需要登录 若未登录,返回到登录页面 留言失败反馈信息 留言成功,异步刷新页 ...
- vue教程3-01 路由、组件、bower包管理器使用
vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...
- Java异常处理设计(二)
考虑对JDK的底层堆栈信息进行处理,一种是重写JDK的Throwable,另一种是在原错误堆栈信息上进行“二次加工”.目前这两种方式我都实现了,效果非常好. 这篇文章主要记录对错误堆栈进行“二次加工” ...