解决 input 文件上传不能上传重复文件的问题

本文探讨了使用input[type=file]上传相同文件时出现的问题及解决方法。当用户尝试上传与前次相同的文件时,由于onchange事件未被触发导致上传失败。文章提供了一种简单有效的解决方案,即将input元素的value属性设为null。

问题发生背景

使用input[type=file] 实现文件上传功能,通过onchange事件触发js代码,这个时候第一次上传是完全没问题的,不过当你第二次上传文件时,如果是不同于上一次上传文件的话是可以正常上传的,不过如果你选择的还是上一个文件,也就是两次上传的文件重复了,那么就会上传失败。

原因

input是通过onchange事件来触发js代码的,由于两次文件是重复的,所以这个时候onchange事件是没有触发到的。

解决方案

方案一: 删除input标签的代码并重新添加dom节点,不过这个方案太笨拙,所以使用方案二。
方案二: 把input的value重新设置为空就好了,

document.getElementById('uploadFile').value = null;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值