[SOLUCIONADO] mostrar imagenes de un input file

mbrisenog · #1 (**permalink**) 23/04/2016, 04:11

hola a todos!! solicito de su sabiduria, tengo este codigo para mostrar imagenes que cargo con el input file , pero solo me muestra la ultima imagen del array, como puedo hacer para que me muestre todas las que selecciono ?

entiendo que estoy reemplazando cada vez que pasa el for, pero o se como ir almacenando cada imagen y final mostarlas todas!.

saludos espero me puedan ayudar

Código HTML:

<html>
      <head>
            <style>
          .thumb {
            height: 128px;
            border: 1px solid #000;
            margin: 10px 5px 0 0;
          }
        </style>
    </head>
    <body>
      <input type="file" id="files" name="files[]" multiple="true" />
        <br />
        <div id="lista_imagenes">

        </div>

        <script>
              function archivo(evt) {
                  var files = evt.target.files; // FileList object

                  // Obtenemos la imagen del campo "file".
                  for (var i = 0, f; f = files[i]; i++) {
                    //Solo admitimos imágenes.
                    if (!f.type.match('image.*')) {
                        continue;
                    }

                    var reader = new FileReader();

                    reader.onload = (function(theFile) {
                        return function(e) {
                          // Insertamos la imagen
                         document.getElementById("lista_imagenes").innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
                        };
                    })(f);

                    reader.readAsDataURL(f);
                  }
              }

              document.getElementById('files').addEventListener('change', archivo, true);
      </script>
    </body>
</html>

mbrisenog · #2 (**permalink**) 23/04/2016, 04:18

ya lo resolvi ! no se si es la manera mas eficiente, estoy abierto a comentarios

Código HTML:

<html>
      <head>
            <style>
          .thumb {
            height: 128px;
            border: 1px solid #000;
            margin: 10px 5px 0 0;
          }
        </style>
    </head>
    <body>
      <input type="file" id="files" name="files[]" multiple="true" />
        <br />
        <div id="lista_imagenes">

        </div>

        <script>
              function archivo(evt) {
                  var files = evt.target.files; // FileList object

                  // Obtenemos la imagen del campo "file".
                  for (var i = 0, f; f = files[i]; i++) {
                    //Solo admitimos imágenes.
                    if (!f.type.match('image.*')) {
                        continue;
                    }

                    var reader = new FileReader();

                    reader.onload = (function(theFile) {
                        return function(e) {
                          // Insertamos la imagen
                      var respaldo=document.getElementById("lista_imagenes").innerHTML;
                         document.getElementById("lista_imagenes").innerHTML =respaldo+['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
                        };
                    })(f);

                    reader.readAsDataURL(f);
                  }
              }

              document.getElementById('files').addEventListener('change', archivo, true);
      </script>
    </body>
</html>

Alexis88 · #3 (**permalink**) 23/04/2016, 13:43

También podrías añadir cada imagen como un nuevo nodo mediante el método .appendChild():

Código Javascript:

Ver originaldocument.getElementById("lista_imagenes").appendChild(/* La imagen */);

El método .insertAdjacentHTML() también te puede servir:

Código Javascript:

Ver originalvar lista = [].map.call(evt.target.files, function(file){
    return "<img src='" + file.name + "' />";
});
document.getElementById("lista_imagenes").insertAdjacentHTML("afterbegin", lista.join("<br />"));

De esta manera, creas un array de elementos <img> en donde cada uno posee a cada una de las imágenes seleccionadas; luego, unimos a todos los elementos del array con saltos de línea y añadimos al bloque entero luego del inicio del elemento en donde se mostrarán.

mbrisenog · #4 (**permalink**) 24/04/2016, 10:10

ohh vaya , esta de lujo este metodo!! muchas gracias !!