Construir un formulario file upload arrastrable con DropzoneJs y PHP

DropzoneJS es una librería open source que permite subir archivos de manera drag and drop y pre-visualizando las imágenes. Es una buena opción al no depender de JQuery.

En este tutorial, construiremos un file upload múltiple usando DropzoneJS, mientras que nuestro backend será soportado por el lenguaje PHP. En mi caso utilizare WAMP Server.

La estructura de nuestro proyecto será la siguiente:

El archivo dropzone.js es la libreria javascript principal.
El archivo index.php es el formulario en el que se arrastran las imágenes para subirlas a la carpeta uploads que se encuentra dentro del proyecto.
El archivo upload.php es el archivo backend que soporta la subida de archivos internamente.
Dentro de la carpeta css están los archivos de estilos dropzone.css y style.css en caso de dar un poco de diseño al formulario.
Dentro de la carpeta uploads se almacenará los archivos una vez arrastrados al formulario de subida.

Pueden bajar el proyecto completo del siguiente enlace del Google Drive: Descargar Proyecto.

Una vez entendido esto bajamos el archivo zip, descomprimimos y copiamos toda la carpeta dropuploadonly al directorio www del WAMP Server por defecto la ruta es C:\wamp\www\ en caso no usemos wamp podemos buscar la carpeta www del apache.

Para probar abrimos el navegador y entramos a la dirección http://localhost/dropuploadonly/index.php

Al arrastrar un archivo podemos darnos cuenta que se almacena automáticamente en la ruta C:\wamp\www\dropuploadonly\uploads

En caso de requerir la pre-visualización de los archivos ya existentes en la carpeta almacén de archivos pueden bajar del Google Drive: Este otro proyecto, la estructura es la misma del ejemplo básico solo la carpeta tiene otro nombre (dropsample), a fin de no afectar al ejemplo básico.

Como Obtener El Navegador Web y La Versión usando PHP

Es clasico toparse con problemas de diseño en web, especificamente con internet explorer 6 por lo que a continuación les recomiendo usar dos funciones, la primera es para obtener el nombre del navegador web desde el que se accede y la otra es para obtener la version de este, estas funciones son muy útiles a la hora de diferenciar contenidos debido al renderizado de cada cliente web.

-Función para obtener el nombre del navegador:

function get_user_browser()
{
   $u_agent = $_SERVER['HTTP_USER_AGENT'];
   $ub = '';
   if(preg_match('/MSIE/i',$u_agent))
   {
       $ub = "ie";
   }
   elseif(preg_match('/Firefox/i',$u_agent))
   {
       $ub = "firefox";
   }
   elseif(preg_match('/Safari/i',$u_agent))
   {
       $ub = "safari";
   }
   elseif(preg_match('/Chrome/i',$u_agent))
   {
       $ub = "chrome";
   }
   elseif(preg_match('/Flock/i',$u_agent))
   {
       $ub = "flock";
   }
   elseif(preg_match('/Opera/i',$u_agent))
   {
       $ub = "opera";
   }
 
   return $ub;
}

-Función para obtener la versión del navegador:

function gbversion()
{
  $Name="";
  $Version=""; 
        $browsers = array("firefox", "msie", "opera", "chrome", "safari",
                            "mozilla", "seamonkey",    "konqueror", "netscape",
                            "gecko", "navigator", "mosaic", "lynx", "amaya",
                            "omniweb", "avant", "camino", "flock", "aol");
        $Agent = strtolower($_SERVER['HTTP_USER_AGENT']);
        foreach($browsers as $browser)
        {
            if (preg_match("#($browser)[/ ]?([0-9.]*)#", $Agent, $match))
            {
                $Name = $match[1] ;
                $Version = $match[2] ;
                break ;
            }
        }  
  return $Version;
} 

-Como en mi caso el problema solo se daba cuando usaba internet explorer 6 use el siguiente codigo:

if(get_user_browser()=="ie" && gbversion()=="6.0")
{
 echo "hacer ie6";
}
else
{
 echo "hacer otro";
}