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

Question

我有这样的输入：

<input type="file" multiple>

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

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

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>

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>

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

How can I create thumbnails from a multiple HTML input?

html

javascript

jquery

multi-upload