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的{{1}}处理程序，并且您在更改URI之前不等待加载一个图像。所以你只处理一个图像。

此外，当您的reader处理程序开始执行时，onload可能等于i，因为它是异步执行的，并且您正在停止{ {1}}在您到达零索引数组的末尾后循环一步。

添加a few console.log() statements后，所有这一切都变得清晰：

count

所以明显的解决办法就是不要做那些事情。首先，将您的加载处理程序创建为一个单独的函数，它不依赖于for循环中的TypeError: Argument 1 of FileReader.readAsDataURL is not an object. "Count: 3" "readUrl: 0" "readUrl: 1" "readUrl: 2" "readUrl: 3" "onload: 3"，然后您可以重复使用它：

然后，创建一个数组来保存多个（每个图像一个），而不是只有一个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

Working fiddle

未显示多个图像预览

1 个答案: