React input[type='file'] 连续上传同一文件不触发onChange事件的解决方法

在使用

type类型为file

的input来上传文件时，发现连续上传同一个文件，第二次以后就不会再触发onChange事件，原因是

onChange事件触发的条件为其value发生变化

，上传文件时，该input的value值为文件在磁盘中的位置。知道了触发条件以后，我们就可对症下药：

改变value值即可

。

方法1

在input元素中添加onClick事件，点击时将其value置空即可。

<input
type='file'
accept='.xlsx, .xls'
onClick={(event)=> { event.target.value = null }}
onChange ={this.onImportExcel}
/>

方法2

其实也一样，就是获取该元素，将其值在合适的地方将其置为空即可。

<input
id='file'
type='file'
accept='.xlsx, .xls'
onChange={this.onImportExcel}
/>

//在合适的地方设置其值为null
document.getElementById('file').value = null;

• 点赞 2
• 收藏
• 分享
• 文章举报

码飞_CC 博客专家 发布了68 篇原创文章 · 获赞 538 · 访问量 32万+ 私信 关注