js input[type=file]选择重复的文件，无法触发change事件

最新推荐文章于 2024-08-20 17:43:20 发布
最新推荐文章于 2024-08-20 17:43:20 发布
阅读量2.1k 收藏 3
点赞数 1
分类专栏： js (JavaScript) Html5 Vue 文章标签： javascript p2p 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42740797/article/details/123206168
版权
js (JavaScript) 同时被 3 个专栏收录
226 篇文章 10 订阅
订阅专栏
Vue
135 篇文章 3 订阅
订阅专栏
Html5
100 篇文章 1 订阅
订阅专栏
"当浏览器检测到文件上传的input元素选择的文件未变化时，为节省资源不会重新加载。但在某些场景如图片裁剪中，即使文件相同也需要触发change事件。解决方法是在input元素上绑定onblur事件，利用onblur="this.value=''""来清空值，确保每次都能触发change事件进行下一步处理。这种方法利用了blur事件的优先级高于change事件的特性。"
摘要由CSDN通过智能技术生成

选择文件的时候，浏览器会判断是否跟之前一致，如果一致他就不会重新加载这个文件，避免无谓的加载消耗。所以我们在不一样的需求的时候，比如裁剪图片，无论他是不是相同图片，都必须让他触发change事件，这样才能进行下一步处理。

解决方法：给input添加原生事件onblur进行清空，οnblur="this.value=''" ，blur比change事件的优先级要高一点。

代码：

<input type="file" accept="image/*" οnblur="this.value=''" @change="uploadPhoto" class="uploadImg"/>

草字
关注
专栏目录
安卓微信浏览器使用input file图片上传无法触发change事件
“明明很开心”的博客空间
04-01 2352
问题现象 项目中遇到一个上传图片的功能，使用了file作为选择上传，需要做图片预览等功能。在多方测试后没有问题，但在安卓微信浏览器中却发现change事件失效无法触发。 解决办法 由于在项目中我是用来上传图片，所以用了accept进行图片的类型限制，如下： <input required="required" type="file" accept="image/png,image/jpeg,...
input type=file 选择图片并且实现预览效果的实例
08-29
在上面的JavaScript代码中，我们使用了jQuery库来获取input file元素，并在其change事件中读取文件数组的第一个元素，然后使用FileReader对象来读取文件，并将读取结果赋值给img元素的src属性，以实现图片预览的功能...
input tpye=file 两次上传同一个文件不触发方法解决办法
weixin_43254676的博客
12-28 1543
<input type="file" style="display: none;" id="file" ref="files" @change="upload"> 使用type=file作为文件上传时，监听change事件来触发方法，但是两次上传同一个文件的话，change事件不会被触发，这时候就需要在每次上传文件完成操作之后手动清空input的值 方法如下： clearInputFile(file){ var form = document.createEle...
input文件选择框选择同一个文件并且触发事件
kaQin0的博客
08-20 129
input[type=file]选择同一个图片/文件无法触发change或者input事件只需要把event.target.value = ''把原来的值制空就行。
js文件上传选择重复同一个文件不触发change事件
wangaiwen的博客
02-02 769
【代码】js文件上传选择重复同一个文件不触发change事件。
js解决上传文件或图片时选择相同文件无法触发change事件的问题
偏执
07-25 347
在网上查了一番发现，当第一次选择文件一上传时，存放的文件由空变成了文件一，上传成功后，再次选择文件一，此时就相当于没有change，所以两次选择相同的文件不会触发change事件，昨天在做一个上传文件的模块时遇到了这样的问题：打开文件一上传，上传成功后再次点击文件一，change事件无反应。解决办法，把选择的文件清空就好了。
关于file标签change选择同一个文件不会触发问题
CodingNoob
05-07 1205
最近在项目开发的过程中遇到一个问题，就是需要file标签选中后触发，但是有个问题，就是change选中之后如果选钟的是同一个文件，那么change事件就不会触发，不过最后还是找到了方法去解决这个问题。 上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
input框type=file上传文件的时候不触发change事件的问题
空空壹的博客
07-27 1814
今天上传文件遇到了传图片的时候连续选择同一张图片不会触发change事件的问题，去网上搜了一下比较容易的方法是吧 file的值清空 然后试了以下方法： html： <input type="file" id="file_new_item" name="file_new_item"> 第一种解决方法： $("#file_new_item").val(''); 在chrome上试了一下，这样就行了可以触发change事件了，虽然type=file不能修改值 但是可以赋值空 然而我们.
解决vue项目中type=”file“ change事件只执行一次的问题
08-27
这是因为 input[type="file"] 元素的 change 事件只会在文件选择改变时触发，而不是在文件上传完成时触发。 在 Vue 项目中，我们可以使用 v-if 指令来解决这个问题。我们可以添加一个小的开关 ishowFile，将 input...
vue中使用input[type="file"]实现文件上传功能
10-18
综上所述，Vue中使用`input[type="file"]`实现文件上传功能是一个涉及前端多种技术的综合性任务，它不仅包括对Vue指令和事件处理的运用，还可能涉及到对第三方库的集成和对安全性的考虑。通过实践这个功能，可以深入...
关于type="file"的input框样式修改小结
09-28
同时，使用JavaScript监听事件，如 `change` 事件，可以自定义文件选择后的反馈，如显示选中文件的名称。 总的来说，修改 `type="file"` 输入框的样式是一个挑战，需要结合多种技术手段和浏览器特性。为了确保在...
file input 控件重新上传相同文件不触发 change 事件，通过清空 file 控件内容解决
kkcoder
04-10 2448
通过 js 清空 file 控件内容，解决 file input 控件重新上传相同文件时不触发 change 事件问题
如何解决input file 选取相同文件后，change事件不起作用解决方法
weixin_34348805的博客
05-04 373
两种方法 1、在你的input所属的form表单reset()就可以了！ $("#avatorForm")[0].reset();  2、设置你的input file value值为空 $('.inputImage').val('');  
js input type file onchange
weixin_42185136的博客
04-27 3463
js input type file onchange addEventListener函数 <input type="file" accept="image/*" capture="camera" id="cameraInput" multiple> <script> let fileUpload = document.getElementById("cameraInpu...
关于WIN10 input type="file"无法触发change问题
qq_37067705的博客
07-14 1192
一般逻辑，显示一个按钮，click事件触发input type="file"弹出，input type="file"绑定change事件，但是发现当file上面添加display:none时，打死都触发不了change事件，后来强行把input隐藏掉，就好了，当前环境：WIN10（非常不错的系统--我去年买了个表，点了上传，要等半天才弹出文件上传框，除非用flash）。
input中file文件上传改变事件问题
qq_43121828的博客
07-05 5664
在input为file类型时，改变事件错误后不执行问题： 1.改变事件：上传文件 2.在读取文件之前发送请求，验证文件类型是否正确： 不正确：提示用户，中断， 再次验证错误文件类型就不执行改变事件， 此时多做一步，将input中的值清空即可 3.正确：读取文件流 4.提交表单验证 5.回显 ...
onchange事件调用ajax,file对象选中同一个文件如何触发change事件
weixin_42506911的博客
08-06 673
html file控件的onchange事件，在选中同一个文件时是不会触发的。要想file选中同一个文件onchange事件也触发，可以创建一个新file对象，透明浮动覆盖在显示的file对象上，这样操作的就是新file对象，即使选中同一个文件也会触发onchange事件了。注意：提交表单时需要移除那个透明的同名file对象，要不服务器端使用name来获取控件会出错。file对象选中同一个文件如何...
解决input file两次选择相同文件不触发change事件的问题
weixin_34248258的博客
01-04 1701
当第一次选择图片1时，input的change事件触发，因为input的value从无变成图片1，value值发生了改变， 此时： 如果第二次选择图片2时，input的change事件触发，因为input的value从图片1变成图片2，value值发生了改变， 如果第二次选择图片1时，input的change事件不会触发，因为input的value值依然为图片1，value值没有发生改变，如...
＜input type=“file“＞ change事件异常处理办法
p15097962069的博客
03-12 382
<input type="file"> change事件异常处理办法
vue input type=file清空文件
最新发布
09-10
在Vue中，如果你想要实现一个`<input type="file">`元素清空已选择的文件，可以使用JavaScript来操作DOM元素或者利用Vue的绑定功能。以下是一个实现清空文件输入的示例方法： ```javascript // 假设你的<input>元素...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草字

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值