[前台]---js重复上传一张图片两次,第二次失败的解决办法和思路

js重复上传一张图片两次,第二次会失败,解决办法就是修改input的value值.

先上代码:

<input style="display:none" 
        type="file" id="aaa" 
        onchange="newuploadImageForDetail(event)" 
        accept="image/jpg, image/jpeg, image/gif, image/png">

普通的写法就是这样,之所以第二次上传同样的图片失败,是因为这个onchange事件,onchange事件会在内容改变且失去焦点时触发,而第二次上传的图片还是上一次的图片的话,就不会触发这个onchange事件,从而导致图片上传失败.

详细解决办法:
上传完修改这个input的value值,这样就可以保证第二次上传的图片肯定会触发onchange事件,如下:

$("#aaa").val("");

总结:
虽然同时上传两张相同的图片一般在逻辑上是不正确的,但这个方法也有有用的时候,
比如我的逻辑是:
1.上传完图片,将图片异步保存在远程的图片服务器上,同时返回一个唯一的图片名字,保存在其他标签中,并隐藏起来
2.可以根据这个图片返回的名字,拼接上固定的前缀,就可以在页面看到图片的缩略图了
3.每个图片的缩略图有删除事件,即可以删除本地对应存名字的标签中的这个图片的值
4.这个时候这个方法的价值就体现出来了,如果用户刚刚删除完图片a,再想重新上传刚刚删除的照片a,就会出现上面的问题,即上传不成功,就可能会造成不好的用户体验