Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] mostrar imagenes de un input file

Estas en el tema de mostrar imagenes de un input file en el foro de Javascript en Foros del Web. hola a todos!! solicito de su sabiduria, tengo este codigo para mostrar imagenes que cargo con el input file , pero solo me muestra la ...
  #1 (permalink)  
Antiguo 23/04/2016, 04:11
 
Fecha de Ingreso: diciembre-2014
Mensajes: 72
Antigüedad: 9 años, 3 meses
Puntos: 0
mostrar imagenes de un input file

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> 
  #2 (permalink)  
Antiguo 23/04/2016, 04:18
 
Fecha de Ingreso: diciembre-2014
Mensajes: 72
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: mostrar imagenes de un input file

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> 
  #3 (permalink)  
Antiguo 23/04/2016, 13:43
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: mostrar imagenes de un input file

También podrías añadir cada imagen como un nuevo nodo mediante el método .appendChild():
Código Javascript:
Ver original
  1. document.getElementById("lista_imagenes").appendChild(/* La imagen */);

El método .insertAdjacentHTML() también te puede servir:
Código Javascript:
Ver original
  1. var lista = [].map.call(evt.target.files, function(file){
  2.     return "<img src='" + file.name + "' />";
  3. });
  4. 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.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #4 (permalink)  
Antiguo 24/04/2016, 10:10
 
Fecha de Ingreso: diciembre-2014
Mensajes: 72
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: mostrar imagenes de un input file

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

Etiquetas: file, html, imagenes, input
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 06:45.