[前台]---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,就会出现上面的问题,即上传不成功,就可能会造成不好的用户体验

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

【JS】【33】解决重复上传同一张图片，第二次无反应的问题
正文: <input style="display:none" type="file" id="img" οnchange=" ...
php上传同一张图片,两种php实现图片上传的方法_PHP
图片上传在项目中经常用到,几乎没有任何一个项目可以脱离图片或者是文件上传.本篇我在这向大家介绍两种常规的上传方式.(注:在这里我们仅仅是对功能的实现,不去做过多的前端的样式) 一.利用form表单上传 ...
input file 重复上传同一张图片失效的解决办法
项目中遇到上传图片,需要本地预览效果,测试时无意间发现,当选择A图片,然后更换为B图片,完全正常:当选择A图片,取消该图片,再测选择A图片后,发现不会再生成预览效果,出现了bug: 查找相关资料后,终 ...
解决app在没有上传app store前大规模安装测试问题的一些办法与思路
正常情况,做好一个苹果的app,要想让大众用户下载安装使用,都是上传到app store,用户登录app store找到你开发的app下载安装使用. 但是app能否成功出现在苹果的app store ...
xshell文件传输乱码_在Xshell中使用rz命令上传文件出现乱码且文件无法删除的解决办法...
有些时候,我们在使用rz命令上传文件失败或者不小心输入命令会产生乱码文件名,之后尝试使用rm 删除这些文件,无果:使用rm -rf强制删除,亦无果.是不是很好奇为什么如此强大的rm命令竟然删除不了这些 ...
关于上传文件时，服务器选择列表为空的解决办法
如下图所示,用户在上传文件时,弹出的服务器列表选择对话框为空,无法进行选择操作. 可能的问题原因分析: 1.该上传目录状态异常. 2.如果是新装系统,则可能是监控未新建上传文件夹,目录状态为0. 3. ...
上传文件报413 Request Entity Too Large错误解决办法
产生这种原因是因为服务器限制了上传大小 1.nginx服务器的解决办法修改nginx.conf的值就可以解决了将以下代码粘贴到nginx.conf内 client_max_body_size 20 ...
上传照片出现类没有被定义: 'upload_5xSoft'的解决办法
Microsoft VBScript 运行时错误 '800a01fa' 类没有被定义: 'upload_5xSoft' \admin\flash_images_5_saveupload.asp, li ...
QQ群无法上传文件，离线传送文件都可以的解决办法
使用windows键+R打开运行对话框并输入regedit打开注册表编辑器,然后找到这个位置: HKEY_CURRENT_USER\Software\Microsoft\Windows\Current ...

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

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

最新文章

热门文章