【JS】【33】解决 重复上传同一张图片,第二次无反应 的问题

正文:

<input style="display:none"
        type="file" id="img"
        οnchange="uploadImage(event)"
        accept="image/jpg, image/jpeg, image/gif, image/png">

问题:用户上传图片A,然后点击删除,然后又再次上传图片A,程序没有反应

原因:第二次上传还是上一张图片的时候,onchange方法不会被触发

解决方案:每次上传完代码后,都把值清空。$("#img").val("");

参考博客:

[前台]---js重复上传一张图片两次,第二次失败的解决办法和思路 - zhangsir的博客 - CSDN博客
https://blog.csdn.net/java_zhangshuai/article/details/80426439

原文地址:https://www.cnblogs.com/huashengweilong/p/11380334.html

时间: 2024-11-06 03:34:48

【JS】【33】解决 重复上传同一张图片,第二次无反应 的问题的相关文章

input file 重复上传同一张图片失效的解决办法

项目中遇到上传图片,需要本地预览效果,测试时无意间发现,当选择A图片,然后更换为B图片,完全正常:当选择A图片,取消该图片,再测选择A图片后,发现不会再生成预览效果,出现了bug: 查找相关资料后,终于找到了两个解决办法: 方法一:来回切换input[type='file']的type属性值,可以是'text','button','button'....,然后再切换回来'file' 方法二:每次取消图片预览后,重置input[type='file']的value的值,如上图所示.

安卓手机上传同一张图片第二次不触发onchange

清空上一次file内部的值 <script type="text/javascript"> var file = document.getElementById("fileData"); // for IE, Opera, Safari, Chrome if (file.outerHTML) { file.outerHTML = file.outerHTML; } else { // FF(包括3.5) file.value = ""

上传图片删除后,不能上传同一张图片的解决方法

js上传一张图片后, 删除后, 不能再次上传该图片, 用户体验不是很好 <div class="uploader-input-box"> <input class="uploader-input" id="uploader-input" name="imgurl" type="file"> </div> 解决方式 修改input的value值 $('#uploader-i

微信js sdk上传多张图片

微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="11111111111111111111"; $secret="11111111111111111111"; $token = S('access_token'); if (!$token) { $res = file_get_contents("https://api.weixin.qq.c

js实现图片文件上传的心得

今天研究一下图片上存的一个实现方法,由于上周没写技术周记,这次一定要写好! 那么问题来了:PHP处理图片上传时要求JQ实现数据的交互,怎么办? 这里涉及到的一个logo上传的需求,根据radio选择是否更新logo,同时form表单将以js事件处理 <div class="comLogo sbox"> <div class="CLheader">公司logo:</div> <div class="ui-imgsel

上传数据+上传一张图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax上传数据(1.解决传送数据乱码问题2.苹果手机上传图片翻转问题)</title> <meta name="viewport" content="width=device-width,initial-scale=1,

WebUploader插件 怎么取消避免重复上传

这两天在寻找新的上传组件,发现WebUploader不错.他不处理UI,方便定制.不过,发现一个很坑爹的问题,就是上传一次后,第二次上传同样的东西,他会在error事件里抛出F_DUPLICATE,无法重复上传.重写beforeFileQueued事件也不行.查看API,实在找不到此项的配置项.没办法,只好找到源码,注释掉他检查重复,抛出error的代码,然后重新压缩js,搞定. 不知道大家有没有更好的办法,交流下.对了,我的压缩用的是:http://tool.oschina.net/jscom

ASP.NET(C#)实现一次性动态上传多张图片的代码(多个文件)

在做asp.net的Web开发的时候,我们经常会遇到一次性上传多个文件的需求.通常我们的解决方法是固定放多个上传文件框,这样的解决办法显然是不合理的,因为一次上传多个,就意味着数量不确定.因此我们就要让这些文件上传框动态添加,下面我以我做的一个图库管理中的上传图片的功能为例 默认是上传一个图片,但当我们点“增加图片”按钮时可以实现选择多个图片及其描述同时上传,本功能限制一次最多只能上传8张,且每张图片大小不超过1M,这个大家可根据实际情况更改! 第一步,使用javascript代码实现动态添加文

使用AjaxFileUpload.js实现文件异步上传

ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: <input type="file" name="upload" hidden="hidden" id="file_upload"