I need the images to have different div

Question

I need the images to have different div

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

I'm trying to get the img tags to have different ids. When uploading images that both have different ids but what happens is that both have the same id.

   if (input.files) {
        var files = input.files;
        var filesAmount = input.files.length;

        for (i = 0; i < filesAmount; i++) { 
            var image = files[i];
             var reader = new FileReader();
                reader.onload = function(event) {

                 src_imagenagregada = event.target.result;
                 $("#imagenes").append("<img id='image"+i+"' width='60' height='60' src='"+src_imagenagregada+"'>");

            }

             reader.readAsDataURL(image);


        }

javascript jquery

asked by Carlos Cano 26.03.2018 в 20:24

source

2 answers

Form to upload a document to my server Comparison in several SQL tables

score 1 · Answer 1

What happens here is that the images are displayed after the cycle for and the variable i is already in a fixed value, there are several ways to solve this but the easiest is to add a variable to use as an indexer, for example:

var indizador = 0;
for (i = 0; i < filesAmount; i++) { 
            var image = files[i];
             var reader = new FileReader();
                reader.onload = function(event) {

                 src_imagenagregada = event.target.result;
                 $("#imagenes").append("<img id='image"+indizador +"' width='60' height='60' src='"+src_imagenagregada+"'>");
                 indizador++

            }

             reader.readAsDataURL(image);


        }

score 1 · Answer 2

What you can do is count in your container #imagenes how many labels img you have and add 1, example:

for (i = 0; i < filesAmount; i++) {
  var image = files[i];
  var reader = new FileReader();
  reader.onload = function(event) {
    src_imagenagregada = event.target.result;
    $("#imagenes").append("<img id='image" + ($('#imagenes > img').length + 1) + "' width='60' height='60' src='" + src_imagenagregada + "'>");
  }
}

Greetings ...