Upload Form barra de progreso o animacion

fechasoru · #1 (**permalink**) 04/02/2009, 14:49

Hola!!
Me gustaria saber donde puedo encontrar algun tipo de barra de progresso o gif animado para una formularo de subida de archivos, busque con el google y no encontre nada aun.
Tengo hecho el formulario upload que permite enviar hasta 7.5 mb y necesito alguna animacion que indique al usuario que se esta procesando.
Desde ya saludos.

Ronruby · #2 (**permalink**) 04/02/2009, 14:58

Eso lo logras con AJAX.

Prueba usando el FancyUpload. Buscalo en Google.

fechasoru · #3 (**permalink**) 04/02/2009, 19:37

Necesito una alternativa diferente a lo que vos me das , ya lo tengo hecho al formulario , no solamente carga en cierto directorio el archivo sino tambien graba en la base de datos link y otros datos mas.
Lo que necesito es poner algo que indique se esta subieno el archivo no mas , no es necesario que sea ajax , algun indicativo , por ejemplo cuando entro a este foro siempre ahy una barrita verde que se mueve , que sea algun gif o algo en javascript no mas.

este es mi script de subida

Código php:

Ver original<?php
include_once 'Upload.class.php';
include_once 'ezpdo/ezpdo_runtime.php';
//include 'verificar_session.php'; 
 
 
 
$upload = new Upload;
 
if (!empty($_POST['action']) && $_POST['action'] == 'upload') {
    $archivo;
   try {
    
    $m=epManager::instance();
    $categoria=$m->get('Categoria',$_POST['categoria']);
    
    
    $path="/archivos/carpeta_".$_POST['seccion']."_".$categoria->denominacion;
        
    //$_FILES['userfile']['name']=$_FILES['userfile']['name'].'-'.date('Y-m-d-H-i-s');
    
    $upload->uploadFile($path, 'latin', 10);
        
    
    $m->start_t();
    
    
    $files=$upload->_files;
    $archivo=$m->create('Archivo');
    $archivo->titulo=$_POST['titulo'];
    
    
    foreach ($files as $key=>$value)
    {
        $archivo->nombre_archivo=$value;
        $archivo->path='../'.$path.'/'.$value;
        $archivo->dir='../'.$path;
        
    }
    
      $archivo->descripcion=$_POST['descripcion'];
      $archivo->dia=date('d');
      $archivo->mes=date('m');
      $archivo->ano=date('Y');
              
    
    $categoria=$m->get('Categoria',$_POST['categoria']);
    
    $categoria->archivo_categoria[]=$archivo;
    
    $m->commit_t(); 
   
    
   }
   catch (Exception $ex)
   {
      echo "Error al subir el archivo";
      
      
   }
   
 
   
    ?>
    
    <script>
        setTimeout('document.location="archivo_nuevo.php?oid=<?php echo $_GET["oid"];?>"',1000);
    </script>
        
    <?php
    
    ?>
          <link rel="stylesheet" href="estilo_boton.css" type="text/css" media="screen" />
     
    <?php 
    print ("
            <p align='center'>
            Se subio con exito el archivo al Servidor<br>
            Nombre del Archivo: $archivo->nombre_archivo<br>
            </p>
            <p align='center'style='color:#00F'> 
            Link de Descarga del Archivo  $archivo->path<p>
            </p>
            <p align='center'>
            <a href='$archivo->path' class='enlaceboton'>Descargar</a><br>
            Titulo descriptivo del Documento: $archivo->titulo 
            </p>
            ");
    
   
    
}
 
$m=epManager::instance();
$secciones=$m->get('Seccion');
$band=false;
$oid=1;
 
if(isset($_GET['oid']))
{
    $band=true;
    $oid=$_GET['oid'];
    
}
 
if(isset($_GET['oid'])&& isset($_GET['text_categoria']) && $_GET['text_categoria']!="" )
{
    try {
        
        $s=$m->get('Seccion',$_GET['oid']);
        $nueva_cat=$m->create('Categoria');
        $nueva_cat->denominacion=$_GET['text_categoria'];
        $s->categoria_seccion[]=$nueva_cat;
        $m->flush();
        
    }
    catch (Exception $ex)
    {
     echo $ex->getMessage();    
        
    }
    
}
 
 
?>
 
<head>
<link rel="stylesheet" href="estilo_tablas.css" type="text/css" media="screen" />
<link rel="stylesheet" href="estilo_texto.css" type="text/css" media="screen" />
<link rel="stylesheet" href="estilo_boton.css" type="text/css" media="screen" />
 
 
<script type="text/javascript">
 
function volver()
{
//var x = document.getElementById("combo").value;
document.location = "archivo_gestion.php";
 
 
}
/*
function enviar()
{
var x = document.getElementById("seccion").value;
document.location = "archivo_nuevo.php?oid="+x ;
 
}
*/
function nueva_categoria()
{
var x = document.getElementById("seccion").value;
var y = document.getElementById("text_categoria").value;
 
document.location = "archivo_nuevo.php?oid="+x+"&"+"text_categoria="+y;
 
}
 
function eliminar_categoria()
{
var x = document.getElementById("seccion").value;
var y = document.getElementById("text_categoria").value;
 
document.location = "archivo_nuevo.php?oid="+x+"&"+"text_categoria="+y;
 
}
 
 
function validar()
{
      if (document.form1.titulo.value.length==0)
      {
           alert("Tiene que Ingresar un Titulo Descriptivo del Archivo ");
           document.form1.titulo.focus();
           return false;
       } 
      else if(document.form1.descripcion.value.length==0)
      {
          alert("Tiene que Ingresar una Descripción");
          document.form1.descripcion.focus();
          return false;
          
      }
      else if(document.form1.categoria.value.length==0)
      {
          alert("Cree una nueva Categoria sino Existe");
          document.form1.descripcion.focus();
          return false;
          
      }
      else if(document.form1.userfile.value.length==0)
     {
          alert(" Debe Seleccionar un Archivo. Extensiones permitidas jpg,jpeg,bmp,png,doc,txt,gif,xml,rtf,pdf,xls,rar,tar,zip,tgz,gz ");
          document.form1.userfile.focus();
          return false;
    
      }
     
}
 
</script>
</head>
<body>
<table>
<tr>
<td>
<p align="center">Subir un Nuevo Archivo al Sitio Web</p>
<p>
Suba un nuevo archivo, para que pueda ser descargados por los usuarios del Sitio Web, ejemplo Documentos, Formularios, Reglamentos en formato Word, Excel.<br>
Los formatos de archivos permitidos son: jpg,jpeg,bmp,png,doc,txt,gif,xml,rtf,pdf,xls,rar,tar,zip,tgz,gz y no deben superar los 7.5 MB.<br>
Seleccione una Seccion y Categoría donde almacenar el Archivo.  
</p>
<p>
 
    <form name="form1" action="archivo_nuevo.php" method="post" enctype="multipart/form-data" onsubmit="return validar();">
    <p align="center">
    <label>
    Tipo de Documento: 
    <select name="seccion" id="seccion" onChange="enviar();">
    <?php 
     
     foreach ($secciones as $s)
     {
       if($s->oid==$_GET['oid'])
       {
        echo '<option value="'.$s->oid.'" selected>'.$s->denominacion.'</option>';
            
       }else 
       {
        echo '<option value="'.$s->oid.'">'.$s->denominacion.'</option>';
    
       }
     
     }
 
     ?>
     
    </select>
    </label>
    </p>
    <p align="center">
      <label>
      Categoría del Documento:
    
      <select name="categoria" id="categoria ">
     
      <?php 
     
      $seccion=$m->get('Seccion',$oid);
      
      $categorias=$seccion->categoria_seccion;
      
      if(!isset($categorias))
      {
 
        echo '<option value=""></option>';
        
        
      }
      else 
      {
     foreach ($categorias as $cat)
     {
       
        echo '<option value="'.$cat->oid.'">'.$cat->denominacion.'</option>';
    
       
     
     }
     
      }
 
     ?>
     
       </select>
      </label>
      <label>Agregar Categoria
      <input type="text" id="text_categoria" name="text_categoria" size="20" maxlength="100">
      </label>
      
      <button type="button" OnClick="nueva_categoria();">Agregar</button>
           
     </p>
    
    <p align="center">
      <label>Titulo del Documento ha Subir:
      <input type="text" name="titulo" size="20" maxlength="100">
      </label>
      <input type="hidden" name="MAX_FILE_SIZE" value="8000000">
  </p>
     <p align="center">
       <label>
         Descripción breve del Documento ha subir que permita al usuario conocer, cual es su contenido y fin de uso. 
         <textarea name="descripcion" id="descripcion" cols="45" rows="5"></textarea>
       </label>
     </p>
     <br>
     <p align="center">
      <label>
      Archivo ha Subir:
      <input name="userfile" type="file">
      </label>
    </p>
    <p  align="center"><br>
      <input type="submit" value="Subir Documento"> 
      <input name="salir" type="button" onclick="volver();" value="Salir"/>
    </p>
    <input type="hidden" name="action" value="upload">
    
</form> 
</td>
</tr>
</table>
</body>

GatorV · #4 (**permalink**) 04/02/2009, 19:49

Hola fechasoru,

Eso lo resuelves entonces con Javascript no con PHP, ya que es un evento que se ejecuta en el cliente.

Saludos