Foros del Web » Programando para Internet » Javascript »

Añadir barra de progreso para el upload de imagenes

Estas en el tema de Añadir barra de progreso para el upload de imagenes en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/01/2013, 11:41
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 1 mes
Puntos: 4
Añadir barra de progreso para el upload de imagenes

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
  1.  
  2. <?php  $Ngaleria = $_GET['Ngaleria'];?>
  3.  
  4.  
  5.                     <table border="0" align="left" width="1210px" cellpadding="0" cellspacing="0">
  6.                      
  7.                     <tr>
  8.                     <td colspan="2">
  9.                      
  10.                                          
  11.           <table  border="0" width="100%" align="center"  style="background-color:#ffffff;" cellpadding="1" cellspacing="0">
  12.           <tr>        
  13.              
  14.           <td align="center" width="70px" style="border-right:solid 1px #e8e8e8;">
  15.           <font style=" font-family: arial; color:#000000; font-weight:bold; font-size: 13px;">Ver</font>
  16.           </td>
  17.              
  18.              
  19.           <td align="right" height="40px" style="background-image:url(imagenes_cofranet/fondo_pestanas.png); background-repeat:repeat-x; background-position:0px 0px;">
  20.              
  21.  
  22.              
  23.           </td>
  24.              
  25.           </tr>
  26.           </table>           
  27.                      
  28.                                                      
  29.                     </td>                                    
  30.                     </tr>
  31.                      
  32.                     <tr>
  33.                     <td width="800px" style="padding:25px 25px 25px 25px; border-right:solid 1px #dddddd;">
  34.  
  35.  
  36.               <form name="formu" id="formu" action="portada.php" method="post" enctype="multipart/form-data">
  37.                 <input type="text"  name="page" value="agregar_imagenes" style="width:340px; display:none;"/>  
  38.  
  39.  
  40.                 <table  border="0" align="center" width="100%">
  41.                
  42.                 <tr>
  43.                         <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&ntilde;adir otra imagen</a></div></td>
  44.                 </tr>
  45.                                
  46.                 <tr>
  47.                         <td>
  48.                                                  
  49.                       <!-- Esta div contendrá todos los campos file que creemos -->
  50.                       <div id="adjuntos" >
  51.                       <!-- Hay que prestar atención a esto, el nombre de este campo debe siempre terminar en []
  52.                      como un vector, y ademas debe coincidir con el nombre que se da a los campos nuevos
  53.                      en el script -->
  54.                            
  55.                         <input type="text" name="Ngaleria"  value="<? echo $Ngaleria ?>" style="display:none;"/>
  56.                             <input type="text" name="archivostext[]" size="78" class="Inputs_class"/><br />
  57.                             <input type="file" name="archivos[]" /><br />
  58.                                            
  59.                      </div>    
  60.                                      </td>
  61.                    </tr>
  62.                                      <tr>
  63.                                      <td style="padding-top:20px;">
  64.                                                          
  65.                                      <input type="submit" value="Subir Im&aacute;genes" id="envia" name="Subir Imagenes" class="Estilo_Boton_Cuotas"/>
  66.                                      
  67.                                      </td>
  68.                 </tr>
  69.                 </table>
  70.                                
  71.               </form>
  72.                            
  73.                      </td>
  74.                      
  75.                      <td valign="top" style="background-color:#f8f8f8; margin:0px 0px 20px 0px; border-right:solid 1px #ffffff; border-top:solid 1px #ffffff;">
  76.                      <div style="width:100%; height:28px; align:left; margin:0px 0px 20px 0px; padding:5px 0px 0px 0px; background-color:#eeeeee;">
  77.                      <font color="#666666" size="2" style="padding:0px 0px 0px 10px;"><strong> </strong></font>
  78.                      </div>                  
  79.  
  80.                    
  81.                      <div style="margin:25px 15px 10px 15px; padding-bottom:10px; border-bottom:solid 0px #cccccc;">
  82.                      <span style="font-size:10pt; color:#666666; font-weight:bold;"></span>
  83.                      </div>
  84.                                                                        
  85.                      </td>                               
  86.                      </tr>
  87.                      </table>                          
  88.  
  89. <script type="text/javascript">
  90.  
  91.    var numero = 0; //Esta es una variable de control para mantener nombres
  92.    var numerotext = 0;
  93.  
  94.             //diferentes de cada campo creado dinamicamente.
  95.    evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
  96.    return (!evt) ? event : evt;
  97. }
  98.  
  99. campos file
  100.    addCampo = function () {
  101.      
  102.  
  103.    nDiv = document.createElement('div');
  104.      
  105.  
  106.    nDiv.className = 'Div_Archivo_galerias';
  107.      
  108.  
  109.    nDiv.id = 'file' + (++numero);
  110.      
  111.  
  112.    nCampotext = document.createElement('input');
  113.    nCampotext.className = 'Inputs_class_galerias';
  114.    nCampo = document.createElement('input');
  115.    nCampo.className = '';
  116.      
  117.  
  118.    nCampotext.name = 'archivostext[]';
  119.    nCampo.name = 'archivos[]';
  120.      
  121.  
  122.    nCampotext.type = 'text';     
  123.    nCampo.type = 'file';     
  124.      
  125.  
  126.    a = document.createElement('a');
  127.      
  128.  
  129.    a.name = nDiv.id ;
  130.  
  131.  
  132.    a.href = '#';
  133.      
  134.  
  135.    a.onclick = elimCamp;
  136.      
  137.  
  138.      a.className = 'Texto_galerias_eliminar';  
  139.    a.innerHTML = 'Eliminar';
  140.      
  141.  
  142.  
  143.    nDiv.appendChild(nCampotext);     
  144.    nDiv.appendChild(nCampo);
  145.      
  146.  
  147.    nDiv.appendChild(a);
  148.      
  149.  
  150.  
  151.    container = document.getElementById('adjuntos');
  152.    containertext = document.getElementById('adjuntos');  
  153.    container.appendChild(nDiv);
  154.      container.appendChild(nDivtext);
  155. }
  156.  
  157.  
  158.      elimCamp = function (evt){
  159.    evt = evento(evt);
  160.    nCampo = rObj(evt);
  161.      nCampotext = rObj(evt);
  162.    div = document.getElementById(nCampo.name);
  163.    divtext = document.getElementById(nCampotext.name);   
  164.    div.parentNode.removeChild(div);
  165.    divtext.parentNode.removeChild(divtext);
  166. }
  167.  
  168.  
  169.    rObj = function (evt) {
  170.    return evt.srcElement ?  evt.srcElement : evt.target;
  171. }
  172.  
  173. <?
  174. session_start();
  175. include_once('cerrar_session.php');
  176. ?>
  177.  
  178. </body>
  179.  
  180. 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
  #2 (permalink)  
Antiguo 14/01/2013, 11:54
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Añadir barra de progreso para el upload de imagenes

Mira Primeramente esto no es posible con excepción si utilizas HTML5, o algo parecido como NodeJS

Saludos
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #3 (permalink)  
Antiguo 14/01/2013, 11:55
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Añadir barra de progreso para el upload de imagenes

http://www.johnboy.com/php-upload-progress-bar/
lo bueno de este ejemplo es que funciona en IE

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 14/01/2013, 12:03
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Añadir barra de progreso para el upload de imagenes

Cita:
Iniciado por emprear Ver Mensaje
http://www.johnboy.com/php-upload-progress-bar/
lo bueno de este ejemplo es que funciona en IE

Saludos
No puedo ver la barra de progreso emprear o sera porque estoy ciego jejeje

Aunque el ejemplo esta bueno

Saludos
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #5 (permalink)  
Antiguo 14/01/2013, 12:10
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 1 mes
Puntos: 4
Respuesta: Añadir barra de progreso para el upload de imagenes

Gracias amigo gracias por tu respuesta,

Estaba mirando como usar APC que si da la posibilidad de hacerlo puramente con php, pero haria falta instalar el paquete en el servidor por que hasta php6 no vendra por defecto.

Por cierto este link que me has enviado necesita de APC para funcionar

De todos modos muchisimas gracias amigo

Última edición por franjgg; 14/01/2013 a las 12:20
  #6 (permalink)  
Antiguo 14/01/2013, 12:22
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Añadir barra de progreso para el upload de imagenes

Cita:
Iniciado por Dradi7 Ver Mensaje
No puedo ver la barra de progreso emprear o sera porque estoy ciego jejeje

Aunque el ejemplo esta bueno

Saludos
@Dradi7
subi un archivo grande, por ejemplo con uno de 30kb no vi nada, con uno de 350 si.
@franjgg
Si, disculpá me olvidé de ese detalle. Peropor algún lado tengo otro, no recuerdo si con jQuery, en cuanto lo encuentre te lo paso

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 14/01/2013, 12:28
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Añadir barra de progreso para el upload de imagenes

Cita:
Iniciado por emprear Ver Mensaje
@Dradi7
subi un archivo grande, por ejemplo con uno de 30kb no vi nada, con uno de 350 si.
@franjgg
Si, disculpá me olvidé de ese detalle. Peropor algún lado tengo otro, no recuerdo si con jQuery, en cuanto lo encuentre te lo paso

Saludos
Emprear

Disculpa ya lo pude probar y funciona lo he estado probando en Chrome y también se puede ver??? y buena opción usando el APC no lo había visto

Saludos
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #8 (permalink)  
Antiguo 14/01/2013, 12:52
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Añadir barra de progreso para el upload de imagenes

Con jquery también vi varios, pero no sé, como que no me convencen mucho
http://www.plupload.com/

Voy a ver si invento algo sencillito

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 14/01/2013, 12:56
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Añadir barra de progreso para el upload de imagenes

Si también he visto pero no convence demasiado usando NodeJS si he visto algunos ejemplos

Saludos
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones

Etiquetas: barra, funcion, html, imagenes, input, js, php, progreso, upload
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




La zona horaria es GMT -6. Ahora son las 08:26.