javascript - 多张图片上传预览问题

Question

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 p
    reader.onloadend = function(){
   $("#uploadPreview").css("background-image","url("+this.result+")");
    }
}});

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

该如何解决？

Answer 1

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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