首页 > 多张图片上传预览问题

多张图片上传预览问题

JS小白~对网上的一段代码加以改造想要实现多张图片上传预览效果

$("#uploadImage").on("change", function(){
// Get a reference to the fileList
var files = !!this.files ? this.files : [];

// If no files were selected, or no FileReader support, return
if (!files.length || !window.FileReader) return;

// Only proceed if the selected file is an image
if (/^image/.test( files[0].type)){

    // Create a new instance of the FileReader
    var reader = new FileReader();

    // Read the local file as a DataURL
    reader.readAsDataURL(files[0]);

    // When loaded, set image data as background of div
    reader.onloadend = function(){
   $("#uploadPreview").css("background-image","url("+this.result+")");
    }
}});

于是问题出现了:目前最近上传的是考拉图片,下一张再选择上传考拉图片---结果失败。必须上传另一张图片后才能上传考拉图片。

该如何解决?


能发下源码看看吗?小弟初学js,在做一个类似的项目,做到图片上传预览的功能卡住了。。求助啊


问题解决了,原因在于change方法,当最近上传和当前选择的是同一张图片时#uploadImage的值未改变,change事件也就没有发生。解决办法清空input

var uploadImage = $('#uploadImage');
uploadImage.replaceWith(uploadImage = uploadImage.clone(true));

每次上传后,把input换为起初的,值也就清空了。


有好几个地方没有看明白。。522351468


晕,你这个也太麻烦了。。。
直接$("#uploadImage").val(''),前提是uploadImage是个input

【热门文章】
【热门文章】