关于前端上传图片删除后, 不能上传同一张图片的解决方式
问题:
js上传一张图片后, 删除后, 不能再次上传该图片, 用户体验不是很好
附上原代码:
html代码
<div class="uploader-input-box"> <input class="uploader-input" id="uploader-input" name="imgurl" type="file"> </div>
jquery代码
$('#uploader-input').on('change', function () { 省略具体上传功能 }
1.我们在上传图片时, 监听的是$(#uploader-input)的change事件;
2.change事件会在内容改变且失去焦点时触发;
3.第二次上传的图片还是上一次的图片的话,就不会触发这个onchange事件,从而导致图片上传失败.
解决方式:
修改input的value值, 就可以保证第二次上传的图片肯定会触发change事件
$('#uploader-input').val('');
两种场景:
1. 如果想要在上传图片时, 可以上传多张重复的图片, 就把该行代码附在监听change事件的方法中;
2. 如果上传后不小心删除, 想要再次上传该图片, 则把该行代码附在删除按钮的方法中;