上传相同文件名的时候不能触发change事件的解决方案

最新推荐文章于 2021-05-14 16:27:29 发布

转载最新推荐文章于 2021-05-14 16:27:29 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kugeliu/p/7520855.html

本文介绍了三种清除HTML中文件输入<input type=file/>值的方法：将其值设置为null；替换DOM元素；或者上传文件后刷新页面。

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

方法一

在上传完文件之后，将<input type="file" /> 的值置为null，即可。

方法二

在上传完文件之后替换dom

方法三

在上传完文件之后刷新页面

转载于:https://www.cnblogs.com/kugeliu/p/7520855.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30260399

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

CRPER

11-07

1万+

前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里

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

喜欢分享些自己折腾的技术笔记

04-19

2199

【解决方案】 1.将Input[file]的value设置为"" 2.如果包裹在form元素里面的，则使用表单的reset函数 3.用新的input元素替换旧input的元素

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

解决input上传文件选择同一文件change事件不生效

shao.zq的博客

11-08

6646

在文件上传的时候我们我们选择监控change事件来获取文件，发现如果第一次如果选择了A文件，当再次点开选择A 文件时，change事件没有触发，这时可以用如下方式处理. 1. vue项目处理方式： this.$refs.uploadExcelId.value=null; 复制该代码到项目中，并且把uploadExcelId换成自己input的ref即可。 2. 普通js处理方式： event.t...

Angular6 input上传文件时，当选择的文件名重复时，不触发change事件

u010376229的博客

10-21

515

原因是两次input的value值相等了解决办法就是在获取了文件对象后，将事件的target.value赋值为空，即 event.target.value = "" html <button type="button" (click)="uploadFile()">上传</button> <input type="file" name="file" id="file" (change)="onFileSelect($event)" accept="

layui文件上传控件，上传完文件之后自动清空以选择的文件

热门推荐

Mattscl的博客

04-13

1万+

最近遇到一个问题，就是使用layui文件上传控件的时候已经上传成功的控件会继续和原文件绑定在一起，影响第二次上传的效果（注意我是单文件上传控件，也就是每次只能选择一个文件）。本来想要实现标题的效果，但是由于开发时间有限就换了一种解决方法。当然这不是什么难题，拿到layui的upoad.js源码分析一下还是可以找到对应的解决办法的。前面多说了几句废话，下面说一下解决方法：在上传文件方法之...

input on-change事件触发失效和重复上传相同文件失效bug

05-14

4030

问题1：在使用angularJs情况下，使用input标签配合 ng-change 无效，为什么原生的 input的onchange事件有效？问题2：使用input标签文件上传svg之后，然后再上传用同一个svg文件，没有任何反应? 问题1: 原因：首先 ng-change事件要与ng-model绑定，但是在input type类型为file的时候ng-change是无效,所以我们可以这样写 <input type="file" class="inputBtn" accept="image

解决vue项目中type=”file“ change事件只执行一次的问题

08-27

这样子，change 事件将再次被触发，我们可以再次上传相同的文件。以下是解决方案的代码示例： ```html 上传文件" name="" id="" @click="updata"> ...

class-change微库：CSS类名处理与数据属性事件触发

这为动态地添加、移除或切换CSS类提供了一种声明式的解决方案。例如，用户可以使用data-class-change属性来定义一个事件名称，并且在该事件被触发时添加或移除一个或多个类名。这个微库的主要优势在于它简化了类名...

element el-upload上传文件后不显示文件名

最新发布

07-29

</think>### Element UI el-upload 上传文件后文件名不显示问题解决方案 在使用 Element UI 的 `el-upload` 组件时，文件名不显示通常是由于文件对象的 `name` 属性未正确设置或组件渲染机制导致的。以下是具体原因...

Ext与Java实现高效文件上传解决方案

此外，还可以配置`listeners`来监听文件选择后的各种事件，比如文件选中事件`change`，这个事件在用户选择了文件后触发，可以在此事件中进行文件大小的校验等操作。 #### 知识点四：Ext JS文件上传的提交过程用户...

vue导入excel表并且展示excel数据，并且解决了change事件只会触发一次，多次失效的问题

liurong1028的博客

12-03

3244

1. 安装： cnpm install xlsx --save 2. 新建js文件： import Vue from 'vue' import XLSX from 'xlsx' /** * 导入ex表格得到json数据 * 已注入所有Vue实例， * template模板里调用 $importf * 组件方法里调用 this.$importf * 例：<input t...

解决input上传文件时，第二次上传同名文件不触发change事件

josiecici的博客

05-12

796

document.getElementById("inFile1").value = null; 解决这个问题其实很简单，就是在最后不管上传成功还是失败都在input的change事件里面，将input的val修改为空就行了

file input 控件重新上传相同文件不触发 change 事件，通过清空 file 控件内容解决

kkcoder

04-10

2667

通过 js 清空 file 控件内容，解决 file input 控件重新上传相同文件时不触发 change 事件问题

上传文件或图片时选择相同文件无法触发change事件的问题

m0_37865231的博客

05-31

8284

其实很简单，当选择完一个文件之后，会将文件名存放在input中的value值中，当下一次change之后，比对玩发现，value值没有发生变化，所以不能触发。所以，只需要下次将value值清空就ok了；话不多说直接上代码：//批量导入用户 $(document).on('change','#fileToUpload', function () { Addre...

input file onchange事件不触发(第二次上传同名文件)/文件上传也可参考

丁大聪明的博客

12-04

8696

html &amp;amp;amp;lt;div class=&amp;amp;quot;input-box&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;input type=&amp;amp;quot;file&amp;amp;quot; name=&amp;amp;quot;feature&amp;a