javascript - 如何从多个 HTML 输入创建缩略图？

Question

我有这样的输入:

<input type="file" multiple>

我想为输入中选择的每个图像创建一个缩略图(如果有 5 个图像，则创建 5 个缩略图)。我见过很多实现，但没有一个具有多个字段。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

在 input 的 .change 事件中，您可以循环遍历每个文件，然后将其附加到 div 或任何您想要的内容。

工作示例

$('input[type="file"]').on('change', function() {
  for (var i = 0; i < this.files.length; i++) {
    var fr = new FileReader();
    fr.onload = function(e) {
      $('#thumbs').append('<img src="' + e.target.result + '" width="50px" height="50px">')
    }
    fr.readAsDataURL(this.files[i]);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple>
<div id="thumbs">

</div>