【HTML5】文件上传：input[file]选择相同文件时，不触发onchange事件【解决方案】

最新推荐文章于 2022-06-22 15:09:44 发布
最新推荐文章于 2022-06-22 15:09:44 发布
阅读量2.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ET1131429439/article/details/100612580
版权
本文提供了三种有效的方法来清除HTML中文件输入字段的值：1.直接设置Input[file]的value属性为空；2.若文件输入字段位于表单内，可使用表单的reset()函数；3.通过替换原有的input元素实现清除。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

【解决方案】

1.将Input[file]的value设置为""

2.如果包裹在form元素里面的，则使用表单的reset函数

3.用新的input元素替换旧input的元素

html input的file文件输入框onchange事件触发一次失效解决方法
weixin_33943347的博客
11-16 858
最近在做一个图片上传的功能，出现提交一次后，file输入框的change事件无法再次触发的bug，就是说提交一次后必须刷新才能再次提交，这就坑了~ 于是想办法解决它~ 在网上找了一些资料，找到这几种方法： 1、替换掉原来的input框2、remove原来的input框，然后在添加进新的一样的input框 我测试了之后发现可以用下面的方法解决这个问题：第一步：上传完成后替换掉原来的input...
安卓微信浏览器使用input file图片上传无法触发change事件
“明明很开心”的博客空间
04-01 2491
问题现象 项目中遇到一个上传图片的功能，使用了file作为选择上传，需要做图片预览等功能。在多方测试后没有问题，但在安卓微信浏览器中却发现change事件失效无法触发。 解决办法 由于在项目中我是用来上传图片，所以用了accept进行图片的类型限制，如下： <input required="required" type="file" accept="image/png,image/jpeg,...
input输入框file类型第二次不触发onchange事件的解决办法，简单有效
weixin_30641999的博客
02-06 686
　　在网上看了很多办法，现在将网上大部分说法总结如下： 网上说法： 　　原因：选择一次后onchange事件没有绑定到input标签上； 　　 解决办法：拷贝一份input标签的副本,每次选择后对原input标签进行替换。 　　 　　我觉得网上给出的办法每次都要做回调，太麻烦了。应该还有更简单的做法。 　　探究input输入框fi...
解决input file两次选择相同文件不触发change事件的问题
weixin_34248258的博客
01-04 1752
当第一次选择图片1时，input的change事件触发，因为input的value从无变成图片1，value值发生了改变， 此时： 如果第二次选择图片2时，input的change事件触发，因为input的value从图片1变成图片2，value值发生了改变， 如果第二次选择图片1时，input的change事件不会触发，因为input的value值依然为图片1，value值没有发生改变，如...
IOS H5 input标签上传图片 onchange不执行
weixin_39313771的博客
05-06 1220
项目记录：ios h5上传图片onchange不执行 找了一些文章发现：ios safair 浏览器中，必须将 input 添加到 真实的dom 中，onchange事件才会响应 然后成功啦！！！！！ 如果还不可以，就找找其他原因把！ ...
input框type=file上传文件的时候不触发change事件的问题
空空壹的博客
07-27 1987
今天上传文件遇到了传图片的时候连续选择同一张图片不会触发change事件的问题，去网上搜了一下比较容易的方法是吧 file的值清空 然后试了以下方法： html： <input type="file" id="file_new_item" name="file_new_item"> 第一种解决方法： $("#file_new_item").val(''); 在chrome上试了一下，这样就行了可以触发change事件了，虽然type=file不能修改值 但是可以赋值空 然而我们.
file控件选择上传文件确定后触发的js事件是哪个
10-23
首先，file控件在用户选择文件后会触发onchange事件。onchange事件属于表单元素的常见事件之一，当控件的值发生变化时会被触发，具体来说，就是当用户通过file控件选定了一个文件后，该事件就会被触发。onchange事件...
文件上传input file简便美化方案(css)
09-25
在这个JavaScript代码中，我们为file input添加了事件监听，当用户选择文件之后，会触发事件处理函数，该函数会将文件路径设置到文本框中。如果浏览器不支持addEventListener或attachEvent方法，我们使用传统的...
读取input:file的路径并显示本地图片的方法
09-05
`onchange`事件绑定在`<input type="file">`上，当用户选择文件时触发预览。 请注意，实际应用中可能还需要处理其他一些细节，比如错误处理、图片尺寸调整、多文件选择支持等。此外，为了更好的用户体验，通常会在...
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
10-16
当用户选择文件后，`onchange`事件会被触发，调用预设的函数`selfile()`。 2. **获取文件信息**： 在`selfile()`函数中，我们可以通过`document.getElementsByTagName('input')[0].files`获取到用户选择的文件列表...
jquery解决input file控件中的onchange上传文件仅一次的bug
u013594477的专栏
08-10 1872
在功能区管理系统中，在上传区域网格、道路交通、以及功能区类型的xls文件时，好像所有的文件仅可以上传一次，如果下次修改了文件内容，除非刷新网页，否则上传的文件并没有生效。因此这是一个bug,在网上找了好多解决方案，最终得以成功突破。。...
关于input的file框onchange事件触发一次失效的新的解决方法
11-12 4494
转载自:http://blog.youkuaiyun.com/wc0077/article/details/42065193 在google了众多方法后，网上有这么几种方法： 1、替换掉原来的input框 2、remove原来的input框，然后在添加进新的一样的input框 但是不知道为什么非常不幸的是，怎么弄我都弄不出。。 后来我脑袋突然闪过一个灵感，我在触发了一次oncha
input标签处理上传文件时同一个文件上传没反应
我的博客
06-22 886
谷歌浏览器中input重复上传同一文件时没反应， 上传的文件，路径、名称完全相同，才是同一个文件，上传时连续同一文件点击上传， 谷歌浏览器不会重复加载。谷歌浏览器中input的onChange事件默认保存上一次input进去的value，同一个value（根据文件路径判断）在重复上传时不重新加载。解决办法:上传成功后清除input的value值...
input file重复上传同一个文件onchange不调用？
camille的专栏
01-12 1368
问题： React项目中用了原生组件input[type=file]来上传文件，遇到了如下问题： 设置宽度无效！width设置了，但鼠标感应区并不随width扩大。 【解决：用正常width元素，触发元素的click()事件】 多次上传同一个文件，onchange不调用？【原理：onchange监听的是input的value，只有内容变了才会触发。 解决：在onchange中手动置空value：e.target.value = ‘’】 ...
微信安卓input file 上传onchange不能触发问题
weixin_43311271的博客
08-29 2363
在公司的公众号里写了上传图片功能，但是发现部分安卓机型不能触发上传接口，排查发现是onchange没有被触发 解决方法： <input type="file" accept="image/*" /> accept要写为所有格式image-----------------“image/*” ，就可以解决此问题，特此记录 ...
change事件上传文件，如果选择相同文件，触发处理
weixin_34228617的博客
07-27 427
1、上传文件html <input type="file" name="fileUpload" [(ngModel)]="fileUpload" (change)="sendImg($event, inputFile)" id="image" #inputFile/&gt...
INPUT[type=file]的change事件不触发问题
weixin_34405332的博客
08-07 2077
在网页上要操作文件通常会使用INPUT[type=file]控件，但这个控件的设计很蛋疼。它不像其它编程语言中文件选择后会触发一个事件，只是让上面的文字改变，而这个改变可能会触发change事件而已。对于文字没改变的选择，change事件则不会触发。　　当INPUT[type=file]控件上已经选择过一次文件之后，再次点击它选择同一个文件时change事件就不会触发。因为第二次选择后里面的文字和...
easyui filebox 只触发一次 onChange 事件解决方法
justinytsoft的博客
09-26 9437
如下图：
input[type=file] 上传文件时，多次上传相同文件，不能触发onchange（）事件
duolezengjie的专栏
07-30 3981
在上传文件的时候，会遇到这种场景： （1） 第一次上传A脚本，第二次上传B脚本，上传功能一切正常。 （2）第一次上传A脚本，第二次在次上传A脚本，onchange事件不能触发。 解决： input中的onchange事件产生的原因：（一）当input捕获到焦点后，系统存储当前值。（二）当input焦点离开后，判断当前值与之前存储的值是否不等，如果为true则触发onc...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值