input的type为file时，选择文件后，change事件只生效一次的问题

最新推荐文章于 2024-01-23 16:42:20 发布
最新推荐文章于 2024-01-23 16:42:20 发布
阅读量4.8k 收藏 2
点赞数
分类专栏： 前端 文章标签： change事件 图片上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014132473/article/details/85279239
版权

如果所示需求背景，图片可以选择多张，在PC端，是选择本地文件，由于是开发时测试，桌面只有一个测试图片。每次选择都是这张，然后就发现，change事件只会触发一次，多次实验后发现，当你选择的图片和上次选择的图片是同一张时，就不会再触发change事件

L卫鹏
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决angularJS中input标签的ng-change事件无效问题
10-18
当`<input type="file">`的`onchange`事件触发时，我们可以手动调用AngularJS的 `$apply()` 方法，强制进行一次脏检查，从而执行我们期望的函数。 下面是一个示例代码： ```html <input type="file" onchange=...
jquery(live)中File input的change方法只起一次作用的解决办法
10-28
在jQuery中，File input的`change`事件是一个非常常见的用于监听用户选择文件后触发的事件。然而，在某些情况下，开发者可能会遇到`change`方法只触发一次的问题，这通常是由于元素的动态添加或DOM结构更新导致的。...
js触发input的打开文件选择器，将本地图片回显以及上传
最新发布
阿牛哥的博客
01-23 1476
js触发input的打开文件选择器，将本地图片回显以及上传
解决file change 上传只触发一次问题
大米的博客
06-11 291
问题描述： 界面和代码如下图所示，点击“浏览”按钮，第一次能触发change事件，第二次点击就不触发了。 在网上找了很多种方案，如清空input内容，把on改成live，还有replaceWith等方法，尝试了一下全部不行，在此要特别感谢不放弃的自己，在度娘搜索结果的第四页，终于找到了合适的解决方案。 链接如下：https://blog.csdn.net/qq_28256783/article/details/106216305 在此也要特别谢谢这位作者的无私奉献！！！ ...
input的type=file触发的相关事件
热门推荐
现在学习也不晚
07-30 9万+
今天突然用到input相关的事件，突然发现自己还没有总结过input相关事件的运行原理。而且我还竟然翻api去了解了，所以，为了记恨自己，就写了相关与input相关的事件运行的过程。添加了一些相关的方法测试了一下。这一节首先介绍一个input的type=file的运行流程。 我们书写了mousedown，mouseup，click，input，change，focus，blur绑定到了input
多个input表单 并且都有change事件，那么如果优化让多个input共享一个change事件。
柑橘乌云_
07-27 290
可能表达的不是很清晰，但凡你如果听懂了，相信在项目中你会方便很多！以上是通过在标签上定义name属性 来实现的。
input type属性为file时（type="file"），上传一次然后做更新input的change事件
weixin_34235457的博客
03-29 500
最近在做文件上传，第一次上传之后，再次上传同样的文件，不会做出相应的事件处理： 解决方案： 　　当你把input的文件取出之后，使用replaceWith覆盖掉以前的input，这样就做到了刷新input $("#fileAttach").replaceWith('<input type="file" name="file" id="fileAttach" accept="image/...
关于 input type=file 类型的第一次上传文件后，再次打开input上传文件，没有选择文件，但还是触发了input的change事件的解决办法
weixin_44777146的博客
11-12 969
今天在公司遇到一个需求，点击一个按钮弹出一个弹出框 里面有input上传文件，第一次上传很成功，在次打开弹出框，继续input上传文件时候还没有选中文件，确触发了change事件。 因为当时用label 修改了input的样式，所以没看到第二次准备上传文件时，第一次的文件并没有清空的情况。 最后想了一个办法：在每次上传文件后清空文件。 首先在外层套一个form表单 <form id="file_form"> <label for
关于type="file"的input框样式修改小结
09-28
同时，使用JavaScript监听事件，如 `change` 事件，可以自定义文件选择后的反馈，如显示选中文件的名称。 总的来说，修改 `type="file"` 输入框的样式是一个挑战，需要结合多种技术手段和浏览器特性。为了确保在...
一次性选择多文件上传multiple属性
08-30
例如，通过监听`change`事件，每次用户选择文件后，将其上传，并清空当前的文件选择，然后再次触发文件选择对话框，从而达到选择多个文件的效果。 在Java JSP环境中，处理多文件上传通常会涉及Servlet和...
file控件选择上传文件确定后触发的js事件是哪个
10-23
主要介绍了file控件选择上传文件确定后触发了什么js事件,需要的朋友可以参考下
怎样让input type=file 只读，并能实现文件上传
11-17
1. **添加事件监听器**：我们需要监听 `change` 事件，当用户选择了文件之后，将其设为只读状态。 2. **设置只读属性**：由于 HTML `<input type="file">` 并没有内置的 `readOnly` 属性，因此我们需要通过其他方式...
input type=file 手机页面 遇到哪些事儿
weixin_40551876的博客
03-25 361
发现问题 近期使用 saltui 中 PhotoField 组件进行上传文件，发现在安卓机中无法打开图片/文件，而IOS可以 发现几个属性的问题 以下是 PhotoField 组件 自行封装的 input （multiple：多文件）， <input type="file" style="position:absolute;clip:rect(1px 1px 1px 1px);...
ios web input.onchange 不执行
唐僧的专栏
01-18 2793
今天做 文件上传处理的时候发现两个问题： input.onchange ios web 代码不执行有异常,其他端都是好的；检查代码发现以：参数 event ios web 拿不到文件相关属性：可改用下面方式获得 input.onchange = async(event) => { //以前文件：event 中获取 发现在 ios web 通过打印发现中 event 没有参数，ios拿不到文件相关属性 //const file= event.path[0].files[0] ..
input 内容输入完才触发的事件
sky_sunshine_x的博客
04-22 6279
var flag = true; $('#id').on('compositionstart',function(){ flag = false; }) $('#id').on('compositionend',function(){ flag = true; }) ...
input type=file 捕捉完成选择事件
小米人的博客
11-23 1910
问题：第一次选择文件或每次都选择不同文件时好使，但如果我两次都选择同一个文件，就触发不了了； 解决：将value置为空，就解决了。 importMetaDataObject(e: any): void { if (!window.FileReader) { this.$notify.error('您的浏览器不支持FileReader！请升级浏览器'); return; } let reader: any = new FileReader(); co
<input type='file'>选择文件后自动上传文件
蒲公英的约定
05-22 5万+
想要一个选择了文件就自动上传的效果，但之前的 都是写在form表单中来提交的。借助jquery的ajaxfileupload.js，可以这样子弄： 正面： function uploadFile(obj, type) { $.ajaxFileUpload({ url : "http://localhost:8081/ws2/servlet/fileUpload", secur
html图片上传选择文件后的事件,bootstrap-fileinput插件，上传成功后事件
weixin_39636099的博客
06-05 743
注意：这里区分了是同步仍是异步同步的回调走 filebatchuploadsuccess(我把全部的都试了，才发现同步时会走这个方法)异步的回调走 fileuploadedhtml配置项uploadAsync: false,//同步上传bootstrap官方文档http://bootstrap-fileinput.com/events.html异步//初始化头像上传插件$("#portrait")...
input type=file 选择文件后自动上传
Lambert0320的博客
12-28 8737
转载自“一名谦虚的学生” <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试文件上传</title> <script type="text/javascript" src="js/jquer...
vue2 input type=file change事件
08-08
在Vue2中，针对input type...首先在template中定义input元素，并指定type为file，然后在methods中定义处理change事件的方法，并在其中处理选择的文件。通过event.target.files获取选择的文件，再进行相应的操作或赋值。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值