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

Question

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>

Describe more what you want to achieve please, where you want to display those names ? do you want to select multiple pictures at the same time ? — Zakaria Acharki
– Zakaria Acharki, Commented Dec 16, 2017 at 15:41
I want to display multiple picture and name at the same time. Display multiple picture is work, but display name it does not work. Whats wrong with my code? — Ashtav
– Ashtav, Commented Dec 16, 2017 at 15:44

halfer · Accepted Answer · 2017-12-17 01:45:02Z

1

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>

edited Dec 17, 2017 at 1:45

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Dec 16, 2017 at 15:53

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ashtav Over a year ago

I've put it, here I just show the javascript code. The problem is, when I select multiple files, the filename appears only one name

Zakaria Acharki Over a year ago

Check my update passing the file name as parameter to the load function...

codejockie · Accepted Answer · 2017-12-16 16:28:33Z

0

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

edited Dec 16, 2017 at 16:28

answered Dec 16, 2017 at 16:06

codejockie

11.1k5 gold badges52 silver badges58 bronze badges

3 Comments

Ashtav Over a year ago

I've put it, still can't display many pictures and image names

codejockie Over a year ago

I the code I provided, when you run you should see filenames and images.

Ashtav Over a year ago

the image name is still the same when selecting many files, it should show the name of each selected image

Endless · Accepted Answer · 2017-12-17 16:07:50Z

0

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');
});

answered Dec 17, 2017 at 16:07

Endless

38.8k14 gold badges118 silver badges138 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related