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

项目中遇到上传图片，需要本地预览效果，测试时无意间发现，当选择A图片，然后更换为B图片，完全正常；当选择A图片，取消该图片，再测选择A图片后，发现不会再生成预览效果，出现了bug；

查找相关资料后，终于找到了两个解决办法；

方法一：来回切换input[type=‘file‘]的type属性值，可以是‘text’,‘button‘,‘button‘....，然后再切换回来‘file’

方法二：每次取消图片预览后，重置input[type=‘file‘]的value的值，如上图所示。

时间： 2024-10-07 15:38:11

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

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

正文: <input style="display:none" type="file" id="img" οnchange="uploadImage(event)" accept="image/jpg, image/jpeg, image/gif, image/png"> 问题:用户上传图片A,然后点击删除,然后又再次上传图片A,程序没有反应原因:第二次上传还是上一张图片的时候,onchang

css input[type=file] 样式美化,input上传按钮美化 2014年8月29日 256083次浏览由于明天公司组织出去游玩,今天把这两天的博客都写了吧,今天的内容是input[type=file] 样式美化,input上传按钮美化. 我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 思路: input file上传按钮的美化思路是,先把之前的按钮

js 实现 input file 文件上传

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery/jquery-1

安装wps导致 application/kset 上传文件类型报错解决办法

电脑中安装wps上传execl时,上传.xls文件时报错 application/kset 文件类型不正确打印array() print_r($_FILES ) 结果如下: Array ( [userfile] => Array ( [name] => Template.xls[type] => application/kset[tmp_name] => C:\\Windows\\temp\\phpACC.tmp [error] => 0 [size] => 768

javascript input file文件上传

<body> <input type="file" id="myFile" onchange="beforeUpload()"> <button onclick="selectFile()">上传</button> <script> var fileInput = document.getElementById("myFile"); // 选择上传

input(file)异步上传文件

页面 <input id="file" name="file" type="file"><button id="btn" type="button">上传</button> //异步上传文件var $file = $('#file');$('#btn').click(function() { var data = new FormData(); data.append('

input file 文件上传,js控制上传文件的大小和格式

文件上传一般是用jquery的uploadify,比较好用.后面会出文章介绍uploadify这个插件. 但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input file 可以控制上传的格式,但是是html5,很多浏览器不支持,请看我的文章对input file上传类型的控制. 下面我用javascript来控制文件上传的大小和类型. 贴出html代码: <form action="后端接口" enctype="multipart/for

input file图片上传预览

两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var $img = $("#ImgPr"); if(fileObj && fileObj.files && file

input file图片上传预览js实现

js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var $img = $("#ImgPr"); if(fileObj && fileObj.files && fileObj.files[