原生input[‘file‘]上传相同的文件，不会重复触发onChange问题记录

最新推荐文章于 2024-05-13 14:45:17 发布

琴～～

最新推荐文章于 2024-05-13 14:45:17 发布

阅读量1.1k

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/125708395

版权

原生input[‘file’]上传相同的文件，不会重复触发onChange问题记录

当上传相同的文件的时候，会发现onChange并不会重复触发

<body>
  <input type="file" id="ipt">
  <script>
    const ipt = document.querySelector('#ipt');
    ipt.onchange = function () {
      console.log(111);
      ipt.value = ''//上传之后将文件清空
    }
  </script>
</body>

需要在文件上传之后，将ipt中的内容清空；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

琴～～

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生input[‘file‘]上传相同的文件，不会重复触发onChange问题记录

当上传相同的文件的时候，会发现onChange并不会重复触发需要在文件上传之后，将ipt中的内容清空；
复制链接

扫一扫

html input的file文件输入框onchange事件触发一次失效解决方法

weixin_33943347的博客

11-16

632

最近在做一个图片上传的功能，出现提交一次后，file输入框的change事件无法再次触发的bug，就是说提交一次后必须刷新才能再次提交，这就坑了~ 于是想办法解决它~ 在网上找了一些资料，找到这几种方法： 1、替换掉原来的input框2、remove原来的input框，然后在添加进新的一样的input框我测试了之后发现可以用下面的方法解决这个问题：第一步：上传完成后替换掉原来的input...

HTML input file控件限制上传文件类型_动力节点Java学院整理

09-28

HTML中的`<input type="file">`控件用于在网页上实现文件上传功能。默认情况下，用户可以选择任何类型的文件进行上传。然而，为了提高用户体验和安全性，常常需要限制用户只能选择特定类型的文件，例如Word文档、...

参与评论您还未登录，请先登录后发表或查看评论

jquery解决input file控件中的onchange上传文件仅一次的bug

u013594477的专栏

08-10

1757

在功能区管理系统中，在上传区域网格、道路交通、以及功能区类型的xls文件时，好像所有的文件仅可以上传一次，如果下次修改了文件内容，除非刷新网页，否则上传的文件并没有生效。因此这是一个bug,在网上找了好多解决方案，最终得以成功突破。。...

解决input标签进行文件上传时不能上传重复文件的问题

热门推荐

yw_hard的博客

04-17

1万+

React中input type=file, 时，onChange事件不触发问题当选择图片相同的时候，不会触发onchange事件，当选择图片相同的时候，不会触发onchange事件，最近在做react项目时发现的问题，代码如下 // An highlighted block <input type="file" onClick={(e) =>{e.target.value = '...

js input type file onchange

weixin_42185136的博客

04-27

3374

js input type file onchange addEventListener函数 <input type="file" accept="image/*" capture="camera" id="cameraInput" multiple> <script> let fileUpload = document.getElementById("cameraInpu...

file控件选择上传文件确定后触发的js事件是哪个

01-19

一直以来纠结于这个问题。今天闲来上网搜索了一下这个问题。终于知道答案。是onchange事件。经过本人测试，可用。还有说onpropertychange也可以。经chrome浏览器测试，无效果。不知道是什么原因。

读取input:file的路径并显示本地图片的方法

09-05

在网页开发中，`<input type="file">` 是一个常见的文件上传控件，它允许用户选择本地的文件，如图片。然而，由于安全原因，现代浏览器并不直接提供所选文件的完整路径，而是返回一个相对安全的文件名或者一个沙箱内...

css美化input file按钮的代码方法

10-30

要解决这一问题，一种常见的技巧是利用`label`元素与`input[type=file]`关联，通过CSS隐藏原始的文件选择按钮，并创建一个自定义的“浏览”按钮。这种方法的核心思想是将文件选择按钮的透明度设为0，使其不可见，...

原生JavaScript实现异步多文件上传

10-23

在现代Web应用中，异步多文件上传是一个常见的需求，它提供了更好的用户体验，允许用户同时上传多个文件而无需等待每个文件的上传完成。本文将详细介绍如何使用原生JavaScript实现这一功能，主要关注HTML5的新特性...

input[type=file] 上传文件时，多次上传相同文件，不能触发onchange（）事件

duolezengjie的专栏

07-30

3865

在上传文件的时候，会遇到这种场景：（1）第一次上传A脚本，第二次上传B脚本，上传功能一切正常。（2）第一次上传A脚本，第二次在次上传A脚本，onchange事件不能触发。解决： input中的onchange事件产生的原因：（一）当input捕获到焦点后，系统存储当前值。（二）当input焦点离开后，判断当前值与之前存储的值是否不等，如果为true则触发onc...

input上传文件件过程中，同一个文件二次上传无效

qq_41838435的博客

04-07

868

因为change方法监听的是input的value值，只有发生改变时才会去触发change方法，而value在上传文件时保存的是文件的内容，因此只需在上传文件之后对当前的value置空即可。

input file文件上传同一个文件第二次上传无效

总结前端开发中遇到的问题，分享前端知识

06-08

2252

解决办法：调用删除接口上传成功之后记得清除文件，把input的value重新设置为空使用input[type=file] 实现文件上传功能，通过onchange事件触发，这个时候第一次上传是完全没问题的，或者更换其他文件也没问题，当你第二次上传同一文件时，就会出现两次上传的文件重复的问题，就会上传失败无效；............

解决使用input file change文件上传只执行一次

misMa_anran的博客

09-20

817

解决使用input file change文件上传只执行一次

原生input标签 file类型优化修改样式加效果非框架

风起云曦的博客

10-09

1008

先上效果图：点击x可以删除文件，也可以继续添加文件，已添加文件还在，不会消失，主要还是jquery事件控制的。

vue3使用原生input[type=‘file‘]上传文件

LOG的博客

05-28

8211

html页面使用原生input[type=‘file’]，并绑定@change事件，当侦测到该元素选择的文件发生变化时触发上传文件事件 <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required @change="changeFile"> 常用属性 accept（限制可用文件类型）。比如限制只能上传jpg或pngaccept="image/png, image/

解决input=file不能重复上传同一个文件

pan-zy的专栏

08-09

893

问题描述： input=file 上传a.txt文件之后再点击上传a.txt文件没反应解决办法：上传成功回调函数里把input的值置空 $('input[name=fileuploader]')[0].value=""

html 中 input file添加文件成功有那些触发事件

03-29

1. onchange：在文件选择后触发，可以通过该事件获取文件信息。 2. onfocus：在 input 元素获得焦点时触发。 3. onblur：在 input 元素失去焦点时触发。 4. onkeydown：在键盘按键按下时触发。 5. onkeyup：在键盘...

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交