JS实现图片上传多次上传同一张不生效的处理方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 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的弊端