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

Question

我有这样的输入：

<input type="file" multiple>

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

任何帮助，将不胜感激。谢谢。

Answer 1

在.change事件中input，您可以遍历每个文件，并将其附加到 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>

Answer 2

您可以预览多个文件，如下所示。

$('input[type="file"]').change(function() {
  $('.thumbnail').html('');
  $.each(this.files, function() {
    readURL(this);
  })
});

function readURL(file) {
  var reader = new FileReader();
  reader.onload = function(e) {
    $('.thumbnail').append('<img src=' + e.target.result + ' style="width: 100px; height: 120px;"/>');
  }

  reader.readAsDataURL(file);
}

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