Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/05/2016, 10:57
mbrisenog
 
Fecha de Ingreso: diciembre-2014
Mensajes: 72
Antigüedad: 9 años, 5 meses
Puntos: 0
script para input file

hola a todos! tengo un problema con un script espero me puedan apoyar
les explico un poco como funciona lo obtuve buscandolo en google

tengo mi input file que tiene el id="galeria1", y un div que tiene como id="lista_galeria1", bueno pues facil con el input selecciono una o varias imagenes ya que tiene el atributo multiple, y en el div lista_galeria1 me muestra las imagenes que seleccione esto por fines practicos en un formulario que estoy haciendo.

resulta que en mi formulario tengo unos 8 input file y bueno para poder separar genere un script para cada uno de ellos la cuestion aqui y espero me puedan ayudar es que solo funciona si los input file llevan por name="files[]" si le cambio la variable tanto en el name="galeria1[]" y me voy al script y reemplazo la palabra files por galeria 1 no funciona, como mencionaba solo funciona si lleva por name files[] esto pues me complica ya que al subir al servidor las imagenes pues si las sube pero me gustaria poder separar o diferenciar cada input file para asi saber que imagenes vienen de cada uno. espero no confundirlos
saluds
Código HTML:
<input type="file" id="galeria1" name="files[]" multiple />
<div id="lista_galeria1"></div>
<script>

          function VisualizarGaleria1(evt) {
              var files = evt.target.files; // FileList object
              document.getElementById("lista_galeria1").innerHTML="";
              // 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 respaldo1=document.getElementById("lista_galeria1").innerHTML;
                     document.getElementById("lista_galeria1").innerHTML =respaldo1+['<img class="galeria" src="', e.target.result,'" />'].join('');

                    };
                })(f);

                reader.readAsDataURL(f);
              }
          }

          document.getElementById('galeria1').addEventListener('change', VisualizarGaleria1, true);

          </script>