Hola como estan,
Miren mi cuestion es la siguiente:
Tengo una galeria de imagenes en la cual se puede ir añadiendo imagenes continuamente la cosa es que en el archivo de subida ellos pueden elegir con un boton cuantasimgenes desean subir el problema es que no se ve el proceso de subida de cada una con lo que al subir varias la espera se hace larga.
La idea es añadir al codigo que ya tengo una barra de progreso para que se vea como va la subida de imagenes.
el codigo es el siguiente:
Código HTML:
Ver original
<?php $Ngaleria = $_GET['Ngaleria'];?>
<table border="0" align="left" width="1210px" cellpadding="0" cellspacing="0">
<table border="0" width="100%" align="center" style="background-color:#ffffff;" cellpadding="1" cellspacing="0">
<td align="center" width="70px" style="border-right:solid 1px #e8e8e8;"> <font style=" font-family: arial; color:#000000; font-weight:bold; font-size: 13px;">Ver</font>
<td align="right" height="40px" style="background-image:url(imagenes_cofranet/fondo_pestanas.png); background-repeat:repeat-x; background-position:0px 0px;">
<td width="800px" style="padding:25px 25px 25px 25px; border-right:solid 1px #dddddd;">
<form name="formu" id="formu" action="portada.php" method="post" enctype="multipart/form-data"> <input type="text" name="page" value="agregar_imagenes" style="width:340px; display:none;"/>
<table border="0" align="center" width="100%">
<td><span style="font-color:#666666; font-size:10pt; font-weight:bold;">Subir imagenes:
</span><div style="float:right;"><a href="#" onClick="addCampo()" class="Estilo_Boton">A
ñadir otra imagen
</a></div></td>
<!-- Esta div contendrá todos los campos file que creemos -->
<!-- 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="text" name="Ngaleria" value="<? echo $Ngaleria ?>" style="display:none;"/>
<input type="text" name="archivostext[]" size="78" class="Inputs_class"/><br /> <input type="file" name="archivos[]" /><br />
<td style="padding-top:20px;">
<input type="submit" value="Subir Imágenes" id="envia" name="Subir Imagenes" class="Estilo_Boton_Cuotas"/>
<td valign="top" style="background-color:#f8f8f8; margin:0px 0px 20px 0px; border-right:solid 1px #ffffff; border-top:solid 1px #ffffff;"> <div style="width:100%; height:28px; align:left; margin:0px 0px 20px 0px; padding:5px 0px 0px 0px; background-color:#eeeeee;"> <font color="#666666" size="2" style="padding:0px 0px 0px 10px;"><strong> </strong></font>
<div style="margin:25px 15px 10px 15px; padding-bottom:10px; border-bottom:solid 0px #cccccc;"> <span style="font-size:10pt; color:#666666; font-weight:bold;"></span>
<script type="text/javascript">
var numero = 0; //Esta es una variable de control para mantener nombres
var numerotext = 0;
//diferentes de cada campo creado dinamicamente.
evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
return (!evt) ? event : evt;
}
campos file
addCampo = function () {
nDiv = document.createElement('div');
nDiv.className = 'Div_Archivo_galerias';
nDiv.id = 'file' + (++numero);
nCampotext = document.createElement('input');
nCampotext.className = 'Inputs_class_galerias';
nCampo = document.createElement('input');
nCampo.className = '';
nCampotext.name = 'archivostext[]';
nCampo.name = 'archivos[]';
nCampotext.type = 'text';
nCampo.type = 'file';
a = document.createElement('a');
a.name = nDiv.id ;
a.href = '#';
a.onclick = elimCamp;
a.className = 'Texto_galerias_eliminar';
a.innerHTML = 'Eliminar';
nDiv.appendChild(nCampotext);
nDiv.appendChild(nCampo);
nDiv.appendChild(a);
container = document.getElementById('adjuntos');
containertext = document.getElementById('adjuntos');
container.appendChild(nDiv);
container.appendChild(nDivtext);
}
elimCamp = function (evt){
evt = evento(evt);
nCampo = rObj(evt);
nCampotext = rObj(evt);
div = document.getElementById(nCampo.name);
divtext = document.getElementById(nCampotext.name);
div.parentNode.removeChild(div);
divtext.parentNode.removeChild(divtext);
}
rObj = function (evt) {
return evt.srcElement ? evt.srcElement : evt.target;
}
<?
session_start();
include_once('cerrar_session.php');
?>
Y el archivo que recibe las imagenes, las sube y guarda en la BD:
Código PHP:
<body>
<?php
session_start();
include ('conexion.php');
include_once('js_galeria/resize.php');
$Ngaleria = $_POST['Ngaleria'];
//Preguntamos si nuetro arreglo 'archivos' fue definido
if (isset ($_FILES["archivos"]) && $_POST["archivostext"]) {
//de se asi, para procesar los archivos subidos al servidor solo debemos recorrerlo
//obtenemos la cantidad de elementos que tiene el arreglo archivos
$numerodearchivos = count($_FILES["archivos"]["name"]);
$numerodearchivos." imagenes";
//echo("<br />");
//este for recorre el arreglo
for ($i = 0; $i < $numerodearchivos; $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];
$nombre = $_POST["archivostext"][$i];
$imagen = $_FILES["archivos"]["name"][$i];
$Tipo = $_FILES["archivos"]['type'][$i];
$Tamano = $_FILES["archivos"]['size'][$i];
if($Tipo == "image/jpeg" OR $Tipo == "image/gif" OR $Tipo == "image/png"){
if($Tamano < "3000000"){
$consulta = 'INSERT imagenes (Ncofradia, Ngaleria, nombre) VALUES (\''.$_SESSION['Ncofradia'].'\', \''.$Ngaleria.'\', \''.$nombre.'\')';
mysql_query($consulta, $conexion);
$id_imagen = mysql_insert_id($conexion);
list($one, $two) = explode('image/', $Tipo);
$imagen = $_SESSION['Ncofradia'].'_'.$id_imagen.'.'.$two;
$consulta_nombre_imagen = 'Update imagenes Set imagen = "'.$imagen.'" Where Nimagen = "'.$id_imagen.'"';
mysql_query($consulta_nombre_imagen, $conexion) or die(mysql_error());
move_uploaded_file($tmp_name, "imagenes_galerias/$imagen"); # Guardar el archivo en una ubicaci?n, debe tener los permisos necesarios
$thumb=new thumbnail('imagenes_galerias/'.utf8_decode($imagen));
$thumb->size_width(200);
$thumb->jpeg_quality(70);
$thumb->save('imagenes_galerias_thumb/'.utf8_decode($imagen));
$thumb=new thumbnail('imagenes_galerias/'.utf8_decode($imagen));
$thumb->size_width(700);
$thumb->jpeg_quality(90);
$thumb->save('imagenes_galerias_700xx/'.utf8_decode($imagen));
//echo("<br />");
}else{
echo '...El Archivo es demasiado grande';
echo("<br />");
}
}else{
echo '...El Tipo de archivo no es valido';
}
}
}
echo '<div style="width:96%; margin:20px 20px 20px 20px; height:300px; border:solid 3px #c4c4c4; background-color:#f9f9f9;" align="center"><strong style="font-size:20pt; color:#707070; position:relative; top:130px;">Las imagenes se han subido correctamente.</strong></div>';
echo '<meta http-equiv="Refresh" content="2;URL=portada.php?page=albumes&Ncofradia='.$_SESSION['Ncofradia'].'&Ngaleria='.$Ngaleria.'">';
?>
</body>
A ver si alguien sabe como se podria incluir una barra de progreso de subida.
Un saludo amigos