未显示多个图像预览

Question

此代码仅显示单个选定图像.列表中选择的最后一个图像.我认为循环位置不正确或附加代码不正确.我也试过改变位置,但同样的事情只显示单个图像.

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader(),
    count = input.files.length;
    for(i=0;i<=count;i++){
      reader.onload = function (e) {
        //$('.image_preview_cont').html('<img src="'+e.target.result+'" />');
        $('.image_preview_cont').append('<img src="#" id="img_preview'+i+'" />');
        $('#img_preview'+i).attr('src',e.target.result);
      }
      reader.readAsDataURL(input.files[i]);
    }
  }
}

HTML:

<tr>
    <td class="tdhead">Product Image</td><td><input type="file" name="p_image[]" 
    id="imgInp[]" multiple="true" onchange="readURL(this)" /><td>
</tr>
<tr>
    <td colspan="2"><div class="image_preview_cont"></div></td>
</tr>

Answer 1

您反复替换onload单个处理程序reader,并且在更改URI之前不等待加载一个映像.所以你只处理一个图像.

此外,当您的onload处理程序开始执行时,它可能i等于,count因为它是异步执行的,并且for在到达零索引数组的末尾后,您将停止循环一步.

所有这一切都变得清晰,增加了一些console.log()陈述:

TypeError: Argument 1 of FileReader.readAsDataURL is not an object.
"Count: 3"
"readUrl: 0"
"readUrl: 1"
"readUrl: 2"
"readUrl: 3"
"onload: 3"

所以明显的解决方法是不要做那些事情.首先,创建您的负载处理程序,它不依赖于一个单独的函数i中的for循环,那么你可以重复使用它:

function loadReader(e) {
    var i = $('.image_preview_cont img').length;
    $('.image_preview_cont').append('<img src="#" id="img_preview'+i+'" />');
    $('#img_preview'+i).attr('src',e.target.result);
}

然后,FileReader创建一个数组来保存多个(每个图像一个),而不是一个数组:

var readers = [],
    count = input.files.length;

最后,修复for循环的终止条件并在其中创建FileReader对象:

for(i=0;i<count;i++){
    readers[i] = new FileReader();
    readers[i].onload = loadReader;
    readers[i].readAsDataURL(input.files[i]);
}

工作小提琴.