CODEWITHSUNDEEP
javascriptjquery
Ashtav
Ashtav

Reputation: 2966

Input file multiple : show all the file names at the same time using javascript

I want to take the picture and name but it does not work.

<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>

Upvotes: 1

Views: 2044

Answers (3)

Endless
Endless

Reputation: 37806

You can get rid of the filereader, use URL.createObjectURL and make it a litle easier for you since it then will become 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');
});

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You need to pass the file name to the load function as a data parameter like :

$(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>

Upvotes: 1

codejockie
codejockie

Reputation: 10854

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>

You needed to add multiple to the html input element like so:
<input type="file" id="images" multiple />

Upvotes: 0

Related Questions