关于前端上传图片删除后, 不能上传同一张图片的解决方式

 

问题

  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. 如果上传后不小心删除, 想要再次上传该图片, 则把该行代码附在删除按钮的方法中;

posted @ 2017-05-12 11:06  yuxiaoliu  阅读(861)  评论(0)    收藏  举报