Imprimir

Ajax - Javascript - Uploads multiples

Mayo 2013

Introducción
Creación del uploader
Script en el lado del servidor (upload.php)
Carga de Archivos Múltiples Genéricos en Ajax

Introducción

AJAX Upload te permite cargar fácilmente varios archivos sin tener que refrescar la página y además te permite utilizar cualquier elemento para mostrar el archivo de ventana de selección. Es compatible con los principales navegadores y desde la versión 2.0 no requiere correr ninguna libreria. AJAX es compatible con Query, PrototypeJS, Mootools, y otras librerías JavaScript.

Creación del uploader

Lo primero que debes hacer es crear el botón (puedes utilizar cualquier elemento)

Por ejemplo:

 <input id="button2" type="file">

A continuación, debes crear una instancia upload ajax. En su forma más sencilla, puedes crearla utilizando el código siguiente:

 new AjaxUpload('#button2', {   
          action: 'upload.php',   
          onSubmit : function(file , ext){   
                  if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){   
                          // extension is not allowed   
                          alert('Error: invalid file extension');   
                          // cancel upload   
                          return false;   
                  }   
          }   
 });

Script en el lado del servidor (upload.php)

Si utilizas PHP, veamos un ejemplo sencillo:

 $uploaddir = '/var/www/uploads/';   
 $uploadfile = $uploaddir . basename($_FILES['userfile']['name']);   
 if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile))  {   
    echo "success";   
 } else {   
    // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!   
    // Otherwise onSubmit event will not be fired   
    echo "error";   
 }

Nota: es necesario agregar las dos bibbliotecas prototype:
http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js

y ajax-upload http://github.com/valums/ajax-upload/raw/master/ajaxupload.js

Ejemplo de código fuente:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
                    
    </head>   
    <body>   
                <form action="#" method="get">   
                <input id="button2" type="file">   
                </form>   
    </body>   
</html>

Carga de Archivos Múltiples Genéricos en Ajax

Utilizando las mismas librerías, pero con otras técnicas javascript se puede hacer el upload múltiple de archivos.

1- Uso de DOM Javascript para crear líneas de carga

2- Funcion EVAL Javascript para evaluar la instancia generada en cada línea

Ejemplo de código fuente:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
           
           

       
    </head>   
    <body>   
 <table id="myTable" cellspacing="0" border="1">   
  <tbody>   
  </tbody>   
 </table>   

 <a href="javascript:add_annex('myTable')">Add row</a>   

    </body>   
</html>