输入文件倍：使用javascript同时显示所有文件名

Question

我想拍照和名字，但它不起作用。

<script>

var imagesPreview = function(input, append) {
        if(input.files) {
          for(i = 0; i < input.files.length; i++) {
            var filename = input.files.item(i).name;
            
            var reader = new FileReader();
            $(reader).load(function(e){
              $(append).append(
                '<div class="frame col-md-3" align="center">'+
                '<img src="'+e.target.result+'" class="img">'+
                '<div style="word-wrap:break-word; margin-top:5px">'+filename+'</div>'+
                '</div>'
              );
            })
            reader.readAsDataURL(input.files[i]);
          }
        }
      };

      $('#images').on('change', function(e) {
        imagesPreview(this, '.data-image');
      });
</script>

Answer 1

您需要将文件名作为数据参数传递给加载函数，如：

$(reader).load({
     fname: input.files.item(i).name
  }, function(e) {
    var filename = e.data.fname;

    $(append).append(
      '<div class="frame col-md-3" align="center">' +
      '<img src="' + e.target.result + '" class="img">' +
      '<div style="word-wrap:break-word; margin-top:5px">' + filename + '</div>' +
      '</div>'
    );
})

var imagesPreview = function(input, append) {
  if (input.files) {
    for (i = 0; i < input.files.length; i++) {

      var reader = new FileReader();
      $(reader).load({
        fname: input.files.item(i).name
      }, function(e) {
        var filename = e.data.fname;

        $(append).append(
          '<div class="frame col-md-3" align="center">' +
          '<img src="' + e.target.result + '" class="img">' +
          '<div style="word-wrap:break-word; margin-top:5px">' + filename + '</div>' +
          '</div>'
        );
      })
      reader.readAsDataURL(input.files[i]);
    }
  }
};

$('#images').on('change', function(e) {
  imagesPreview(this, '.data-image');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="images" multiple="multiple" />
<div class="data-image"></div>

Answer 2

var imagesPreview = function(input, element) {
  if (input.files) {
    for (const file of input.files) {
      var filename = file.name;
      append(file, filename, element);
    }
  }
};

const append = function(file, filename, element) {
  const reader = new FileReader();
  $(reader).load(function(e) {
    $(element).append(
      '<div class="frame col-md-3" align="center">' +
      '<img src="' + e.target.result + '" class="img">' +
      '<div style="word-wrap:break-word; margin-top:5px">' + filename + '</div>' +
      '</div>'
    );
  })
  reader.readAsDataURL(file);
}

$('#images').on('change', function(e) {
  imagesPreview(this, '.data-image');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="images" multiple />
<div class="data-image"></div>

您需要将multiple添加到html输入元素中，如下所示：
<input type="file" id="images" multiple />

Answer 3

您可以摆脱文件阅读器，使用URL.createObjectURL并使其更轻松，因为它将成为syncron

function imagesPreview(input, append) {
  var URL = window.URL || window.webkitURL;
  var $elm = $(append);

  if (input.files) {
    for (i = 0; i < input.files.length; i++) {
      var file = input.files[i];
      var src = URL.createObjectURL(file);

      $elm.append(
        '<div class="frame col-md-3" align="center">' +
          '<img src="' + src + '" class="img">' +
          '<div style="word-wrap:break-word; margin-top:5px">' + file.name + '</div>' +
        '</div>'
      );
    }
  }
};

$('#images').on('change', function(e) {
  imagesPreview(this, '.data-image');
});