版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_37865510/article/details/84785797
平时都是用input直接上传图片,应该都用的是change事件,但是如果选择了一张图片,然后第二次再次选择,就会出现不生效的bug,这里给大家说一下解决办法,希望对大家有帮助。
html代码:
<b>上传附件:</b>
<div class="file">
<img src="/Public/Admin/img/add-button.jpg" class="add_file" onclick="upload()">
<input type="file" id="upload_file" style="display:none;" multiple>
</div>
js代码:
function upload(){
$("#upload_file").click();
}
$("body").on("change",'#upload_file',function(){
var inputFile = document.getElementById('upload_file');
var file_length=inputFile.files.length;
for(var i=0;i<file_length;i++){
var oFReader = new FileReader();
oFReader.readAsDataURL(inputFile.files[i]);
oFReader.onloadend = function(oFRevent){
var src = oFRevent.target.result;
$("#upload_file").attr('type','text');
$("#upload_file").after('<i class="imagelast" style="width:120px;height:100px;text-align:center;display:inline-block;margin-top:10px;"><img src="'+src+'" name="upload_files" class="upload_files style="width:100px;"/><div class="imageX1"></div></i>');
$(".imageX1").css({"width":'27px','height':'28px','margin-top':'-107px','margin-left':'89px','background-image':'url('+'/Public/Admin/img/cancel.png)','position':'absolute'});
$("#upload_file").attr('type','file');
}
}
})
如上,主要的代码就是把type=‘file’的这个file变成text,然后图片显示之后再变成file类型,这样就解决了change的弊端