javascript - 输入文件多个: show all the file names at the same time using 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>