insertar varias imagenes en un formulario php

[elsa55]

Como insertar varios grupos de imagenes en un formulario?
Ejemplo:
Grupo1:
Imagen: ...........
Imagen: ...........
Imagen: ...........

grupo2:
Imagen: ...........
Imagen: ...........
Imagen: ...........

Enviar



Muchas gracias.

[l2odrigo]

Si te refieres a ¿subir imagenes?

Código HTML:

<form name="formu" id="formu" action="upload.php" method="post" enctype="multipart/form-data">
     <dl>            
   <dt><label>Archivos a Subir:</label></dt>
        <!-- Esta div contendrá todos los campos file que creemos -->
   <dd><div id="adjuntos">
        <!-- Hay que prestar atención a esto, el nombre de este campo debe siempre terminar en []
        como un vector, y ademas debe coincidir con el nombre que se da a los campos nuevos 
        en el script -->
   <input type="file" name="archivos[]" /><br />
   </div></dd>
   <dt><a href="#" onClick="addCampo()">Subir otro archivo</a></dt>      
   <dd><input type="submit" value="Enviar" id="envia" name="envia" /></dd>
     </dl>
</form> 

Código HTML:

<script type="text/javascript">
var numero = 0; //Esta es una variable de control para mantener nombres
            //diferentes de cada campo creado dinamicamente.
evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
   return (!evt) ? event : evt;
}

//Aqui se hace lamagia... jejeje, esta funcion crea dinamicamente los nuevos campos file
addCampo = function () { 
//Creamos un nuevo div para que contenga el nuevo campo
   nDiv = document.createElement('div');
//con esto se establece la clase de la div
   nDiv.className = 'archivo';
//este es el id de la div, aqui la utilidad de la variable numero
//nos permite darle un id unico
   nDiv.id = 'file' + (++numero);
//creamos el input para el formulario:
   nCampo = document.createElement('input');
//le damos un nombre, es importante que lo nombren como vector, pues todos los campos
//compartiran el nombre en un arreglo, asi es mas facil procesar posteriormente con php
   nCampo.name = 'archivos[]';
//Establecemos el tipo de campo
   nCampo.type = 'file';
//Ahora creamos un link para poder eliminar un campo que ya no deseemos
   a = document.createElement('a');
//El link debe tener el mismo nombre de la div padre, para efectos de localizarla y eliminarla
   a.name = nDiv.id;
//Este link no debe ir a ningun lado
   a.href = '#';
//Establecemos que dispare esta funcion en click
   a.onclick = elimCamp;
//Con esto ponemos el texto del link
   a.innerHTML = 'Eliminar';
//Bien es el momento de integrar lo que hemos creado al documento,
//primero usamos la función appendChild para adicionar el campo file nuevo
   nDiv.appendChild(nCampo);
//Adicionamos el Link
   nDiv.appendChild(a);
//Ahora si recuerdan, en el html hay una div cuyo id es 'adjuntos', bien
//con esta función obtenemos una referencia a ella para usar de nuevo appendChild
//y adicionar la div que hemos creado, la cual contiene el campo file con su link de eliminación:
   container = document.getElementById('adjuntos');
   container.appendChild(nDiv);
}
//con esta función eliminamos el campo cuyo link de eliminación sea presionado
elimCamp = function (evt){
   evt = evento(evt);
   nCampo = rObj(evt);
   div = document.getElementById(nCampo.name);
   div.parentNode.removeChild(div);
}
//con esta función recuperamos una instancia del objeto que disparo el evento
rObj = function (evt) { 
   return evt.srcElement ?  evt.srcElement : evt.target;
}
</script> 

Código PHP:

  <?php  
   //Preguntamos si nuetro arreglo 'archivos' fue definido 
         if (isset ($_FILES["archivos"])) { 
         //de se asi, para procesar los archivos subidos al servidor solo debemos recorrerlo 
         //obtenemos la cantidad de elementos que tiene el arreglo archivos 
         $tot = count($_FILES["archivos"]["name"]); 
         //este for recorre el arreglo 
         for ($i = 0; $i < $tot; $i++){ 
         //con el indice $i, poemos obtener la propiedad que desemos de cada archivo 
         //para trabajar con este 
            $tmp_name = $_FILES["archivos"]["tmp_name"][$i]; 
            $name = $_FILES["archivos"]["name"][$i]; 
            echo("<b>Archivo </b> $key "); 
            echo("<br />"); 
            echo("<b>el nombre original:</b> "); 
            echo($name); 
            echo("<br />"); 
            echo("<b>el nombre temporal:</b> \n"); 
            echo($tmp_name); 
            echo("<br />");             
            } 
      }       
?>   

Fuente: Google

[canvega]

Hola...

Funciona perfecto... muchas gracias.. buscando y buscando por fin encontre la solución...

Lo unico es que solo puedo trabajar con 3 archivos por que cuando son 4 no me envia las variables que tengo... no se que estoy haciendo mal.

Lo unico que cambie de su codigo fué esto:

Código HTML:

 <div align="center" id="adjuntos">
        <input name="ximg[]" type="file" id="ximg[]" title="Examinar" alt="esFile|Imagen"/>
        <input name="button2" type="button" onclick="addCampo()" value="Agregar Imagen" />
	  </div> 

Hice algo mal????

[pateketrueke]

recuerda que para que funcionen todos los campos deben estar nombrados de igual forma...

esto es, si en tu formulario tiene name="ximg[]" también al momento de crear mas campos debes usar el mismo name

[canvega]

si!! yo tuve en cuenta ese cambio... pero aún así.. solo me sube al servidor 3 imagenes... Cuando tengo 4 o más se me pierden todas las variables==????

Gracias por responder y ojala me puedan ayudar!

[pateketrueke]

Iniciado por canvega

si!! yo tuve en cuenta ese cambio... pero aún así.. solo me sube al servidor 3 imagenes... Cuando tengo 4 o más se me pierden todas las variables==????

Gracias por responder y ojala me puedan ayudar!

entonces, al recibir el formulario:

Código PHP:

  print_r($_FILES);  
   

¿que resulta?

[canvega]

para mas de 4 imagenes:

Array ( )
Notice: Undefined index: xtipoi in C:\Archivos de programa\EasyPHP-5.3.3.1\www\NOTARIAS\procesar.php on line 6

Notice: Undefined index: xtipoi in C:\Archivos de programa\EasyPHP-5.3.3.1\www\NOTARIAS\procesar.php on line 48


Para 3 o menos si recibe bien las variables.:

[canvega]

Probé el codigo sin cambiarle nada y efectivamente solo funciona para 3 imagenes.

voy a revisar el codigo.. y si alguien me regala una manito muchas gracias.