En uno de mis proyectos hice algo parecido, te cuento: era un sistema para noticias en la que cada noticia tenia un conjunto de 4 o menos imágenes y cada imagen tenia una breve descripción, utilcé 3 tablas para poder tener una relación entre la noticia e imágenes para cada una.
Primero te muestro el javascript que use(no recuerdo donde me lo encontre xD, pero aquí va)
Código Javascript
:
Ver originalvar numero = 0;
var num = 1;
var limite = <?php if (isset ($limite)){echo $limite;}else{echo "4";}?>;
// Funciones comunes
c= function (tag) { // Crea un elemento
return document.createElement(tag);
}
d = function (id) { // Retorna un elemento en base al id
return document.getElementById(id);
}
e = function (evt) { // Retorna el evento
return (!evt) ? event : evt;
}
f = function (evt) { // Retorna el objeto que genera el evento
return evt.srcElement ? evt.srcElement : evt.target;
}
addField = function () {
if(num <= limite){
container = d('files');
span = c('SPAN');
span.className = 'file';
span.id = 'file' + (++numero);
field = c('INPUT');
field.name = 'archivos[]';
field.type = 'file';
field2 = c('INPUT');
field2.name = 'descripcion[]';
field2.type = 'text';
field2.size = '40';
field2.value = 'Inserte una breve descripción';
a = c('A');
a.name = span.id;
a.href = '#';
a.onclick = removeField;
a.innerHTML = 'Quitar';
span.appendChild(field);
span.appendChild(field2);
span.appendChild(a);
container.appendChild(span);
num++;
}
}
removeField = function (evt) {
num--;
lnk = f(e(evt));
span = d(lnk.name);
span.parentNode.removeChild(span);
}
La variable $limite tiene como valor el resultado de una consulta a la tabla donde se relacionan las noticias con las imágenes, si no tenia ninguna imagen cargada entonces el limite es 4
Luego el formulario para subir multiples imágenes
Código PHP:
Ver original<form name="formulario" id="formulario" action="procesa_alta_img.php" method="post" enctype="multipart/form-data">
<input type="hidden" value="alta_img" name="alta_img" />
<?php
$id_noticia = $_POST['id_noticia'];
echo "<input type='hidden' value='".$id_noticia."' name='id_noticia' />";
?>
<label>Selecciona:</label>
<dd><div id="files"></div><div id="comentario"></div></dd>
<dt> <a href="#" onclick="addField()">Añadir Archivo</a></dt>
<dd><input type="Submit" value="Cargar" /></dd>
</dl>
</form>
$id_noticia es el id que se genera automáticamente y lo envio en un campo oculto
y para procesar el upload de imágenes procesa_alta_img.php
Código PHP:
Ver original<?php
include('conexion.php');
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
$errores = 0;
$tot = count($_FILES["archivos"]["name"]); //este for recorre el arreglo
for ($i = 0; $i < $tot; $i++){
//con el indice $i, podemos obtener la propiedad que desemos de cada archivo
//para trabajar con este
//verificamos los campos vacios en este if
if(!empty($_FILES['archivos']['name'][$i])){ //vemos dimensiones de imagenes para aceptarla o no
$img = $_FILES['archivos']['name'][$i]; // almaceno el nombre del archivo subido
$tipo = $_FILES['archivos']['type'][$i]; // almaceno el tipo de archivo
$anchomin = 400;
$imagen = $_FILES['archivos']['tmp_name'][$i];
$descripcion = $_POST['descripcion'][$i];
//aca controlo que el archivo subido sea JPG
if ($tipo == "image/jpeg" || $tipo == "image/jpg" || $tipo == "image/pjpeg" || $tipo == "image/png") {
switch($tipo){
case 'image/jpeg': $ext = "jpg"; break;
case 'image/jpg': $ext = "jpg"; break;
case 'image/pjpeg': $ext = "jpg"; break;
case 'image/png': $ext = "jpg"; break;
default: $ext = "jpg"; break;
}
$img2 = date("mdy")."_".date("His")."_1_".rand(100,9999).".".$ext; //nombre de la nueva imagen achicada // es JPG o PNG entonces abtengo el tamaño en pixel de la imagen subida
$ancho = $tamanos[0];
$alto = $tamanos[1];
$aspecto = $alto/$ancho;
// controlo que mida de ancho mas que el limite
if ($ancho >= $anchomin) {
//agui separo los 3 tamanos de imagen
for($t=0; $t<=2; $t++){
//defino los 3 directorios
$dir = "imagenes_noticias/".$anchomin."/";
$nuevoalto = round($anchomin / $ancho * $alto); //calculo el nuevo alto //tomamos la imagen de la original con un switch
switch($tipo)
{
}
imagecopyresampled($imagennueva, $imagenoriginal, 0, 0, 0, 0, $anchomin, $nuevoalto, $ancho, $alto);// cambio el tanaño imagejpeg($imagennueva, $dir . $img2); // guardo el archivo nuevo $archivo = $dir.$img2;
$sql="INSERT INTO imagen_noticia(
id_noticia,nombre,ruta,dimension,descripcion
) VALUES(
'".$_POST['id_noticia']."','".$img2."','".$archivo."','".$anchomin."','".$descripcion."')";
if($t == 1){
$anchomin = 100;
}else{
$anchomin = $anchomin / 2;
}
}//for($t=0; $t<=2; $t++)
}//if ($ancho > $anchomin)
else {
$name[$errores] = "<b>".$_FILES["archivos"]["name"][$i]." </b><font color='red'>No cumple con las dimensiones requeridas.</font>";
$errores++;
//echo "<font color='red'>Las dimensiones deben de ser minimo de 800px de ancho</font>";
};
}//if ($tipo == "image/jpeg" || $tipo == "image/jpg" || $tipo == "image/png")
else {
$name[$errores] = "<b>".$_FILES["archivos"]["name"][$i]." </b><font color='red'>No tiene extención JPG.</font>";
$errores++;
//$muestra = "<font color='red'>No tiene extención JPG.</font>";
//echo $muestra;
}
}//if(!empty($_FILES['archivos']['name'][$i]))
else{
$campo = $i + 1;
$name[$errores] = "<font color='red'>El campo ".$campo." se envio vacio.</font>";
$errores++;
}
}//for ($i = 0; $i < $tot; $i++)
/*
$celdas = 3;
$dato = $i / $celdas;
$u_fila = floor($dato);
$in=0;
echo "<table border='0'>";
for($fila=0; $fila<=$u_fila; $fila++){
echo "<tr>";
for($cuenta=1; $cuenta<=$celdas; $cuenta++){
echo "<td align='center'>";
echo "<img src='".$direccion[$in]."'>";
echo "</td>";
$in++;
}
echo "</tr>";
}
echo "</table>";
*/
}//if (isset ($_FILES["archivos"]))
function array_envia($array) {
return $tmp;
}
$arreglo = array_envia($name);
$id_noticia = $_POST['id_noticia'];
En este momento ya me tengo que ir, pero alguna duda la comentas y más alrato lo veo, espero te sirva o te oriente con tu proyecto, saludos.