Uploadify en PHP, HTML5, CSS3 con Drag and Drop

Hola amigos por fin lo mas esperado de este tutorial de Uploadify en PHP, HTML5, CSS3 con Drag and Drop. Finalmente hemos terminado la actualización del nuevo sistema de Gestor de archivos ahora mas dinámico. Fue un gran esfuerzo lograr esta mejora para todos aquellos que lo han solicitado tanto para sus proyectos.

En este tutorial anterior muestro la versión 1.0 y aquí debajo les muestro las capturas con las nuevas funcionalidades.

Drag and Drop con HTML5 y JQUERY

Anteriormente se usó el botón de examinar con ActionScript de Flash, el cual podías anexar más de un archivo a la vez, ahora podrás sólo arrastrar tus archivos hacia el área de carga y subirlo, así de sencillo.

Aumentar los campos de captura

En la versión anterior fue muy complicado aumentar más campos para la BD, ahora podrás colocar los campos que necesites y cargarlos a la BD.

Instalación de Uploadify

Antes que nada descarga los archivos desde este link . Deberás tener lo siguiente en lista:


Corre el siguiente Query para crear la tabla donde se almacenarán los datos.

Código :

--
-- Estructura de tabla para la tabla `tbl_temp_files`
--

CREATE TABLE IF NOT EXISTS `tbl_temp_files` (
  `id_files` int(10) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(100) CHARACTER SET utf8 COLLATE utf8_spanish_ci DEFAULT NULL,
  `descripcion` varchar(150) CHARACTER SET utf8 COLLATE utf8_spanish_ci DEFAULT NULL,
  `nombre_image` varchar(100) CHARACTER SET utf8 COLLATE utf8_spanish_ci DEFAULT NULL,
  `tipo` varchar(10) CHARACTER SET utf8 COLLATE utf8_spanish_ci DEFAULT NULL,
  `status` varchar(10) CHARACTER SET utf8 COLLATE utf8_spanish_ci DEFAULT NULL,
  PRIMARY KEY (`id_files`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=115 ;

Dentro de los directorios existe un folder con el nombre Databases\DB_test.sql

Modifica los datos de conexión a la BD dentro del directorio libs\conector.inc.php.

Código :

<?php
   
   $Server="localhost";
   $User="root";
   $Pass="pass";
   $DataBase="test";

?>

Una vez realizados los pasos deberás tener algo así:


Ahora explicaré los ajustes técnicos.

Funcionalidades de Drag and Drop

Vemos dentro del fichero js\draganddrop.js. Este código te ayudará a mostrar la cantidad de archivos a mostrar dentro de las imagenes precargadas.

Código :

// El número de imágenes para mostrar
   var maxFiles = 15;
   var errMessage = 0;

En este podrás definir los tipos de extensiones a utilizar para tu proyecto, actualmente se quedó como el anterior, acepta jpg, png, bmp, pdf, doc, xls, txt, html y pttx.

Código :

// For each file
      $.each(files, function(index, file) {
                  
         // Aqui se maneja los tipos de extensiones a subir.
         if (!files[index].type.match('image.*') && !files[index].type.match('application.*') && !files[index].type.match('text.*')) {
            
            if(errMessage == 0) {
               $('#drop-files').html('Hey! Solo archivos .doc,.pdf,.txt,.html.xls,.jpg');
               ++errMessage
            }
            else if(errMessage == 1) {
               $('#drop-files').html('Detente! Solo .doc,.pdf,.txt,.html.xls,.jpg!');
               ++errMessage
            }
            else if(errMessage == 2) {
               $('#drop-files').html("¿No sabes leer?! solamente .doc,.pdf,.txt,.html.xls,.jpg!");
               ++errMessage
            }
            else if(errMessage == 3) {
               $('#drop-files').html("Carajos hermano entiende!! solo .doc,.pdf,.txt,.html.xls,.jpg :)");
               errMessage = 0;
            }
            return false;
         }

Funcionalidad para adicionar campos

Dentro del fichero js\draganddrop.js cuando requieras adicionar más campos, deberás los inputs que necesites, después te irás al js para agregarlos y modificarlos.

Código :

// Empezar una nueva instancia de FileReader.
         var fileReader = new FileReader();
            
            // When the filereader loads initiate a function
            fileReader.onload = (function(file) {
               
               return function(e) { 
                  
                  // Empuje el URI de datos en una matriz.
                  //Aqui mismo podra agragar los campos que desee del formulario, esto seran enviado a upload.php
                  dataArray.push({name : file.name, value : this.result, nombre: $('#nombre').val(), descripcion:$('#desc').val()});

Por cada elemento que adiciones debes separarlos por coma.

Código :

nombre: $('#nombre').val(), descripcion:$('#desc').val()

Después deberás ir a directorio raíz y abrir el archivo upload.php y agregar o modificar las variables $_POST.

Código :

/*Datos del formulario
*
*   Aqui pondremos todas los campos que desemos agregar en nuestro formulario de envio.
*/
$nombre= $_POST['nombre'];
$descrip= $_POST['descripcion'];

Y finalmente en el Query del SQL.

Código :

//Aqui modificamos el Query para insertar los datos a la BD.
   include('libs/mysql.inc.php');
   $db = new MySQL();

   $insert = $db->consulta("INSERT INTO `tbl_temp_files` (`id_files`, `nombre` , `descripcion` , `nombre_image`, `tipo`, `status`)VALUES('NULL','$nombre','$descrip','$randomName','$mime','1')");

Para mostrar el listado con los campos nuevos, modificar el archivo que está en el directorio libs\listadodeimagenes.php

Código :

<?php
   include("mysql.inc.php");
   
   $db = new MySQL();
   $listar= $db ->consulta("SELECT * FROM tbl_temp_files");

if($db->num_rows($listar)>0){
   echo "<form method='POST' action='libs/eliminar.php'>";
   echo '<div align="right" style="color:#FFF;font-family:Arial; margin-bottom:10px">Eliminar elementos seleccionados <input class="button" type="submit" name"borrar" value="Borrar"></div>';
   echo '<div class="CSSTableGenerator"><table cellpadding="0" cellspacing="0" border="0">';
         echo '<tr>';
            echo '<td width="10">Estado</td>
            <td>Nombre</td>
            <td>Descripcion</td>
            <td width="70">Vista</td>
            <td width="70">Opciones</td>';
         echo '</tr>';
            while($row=($db->fetch_array($listar))){
               echo '<tr class="odd gradeA">';
                  if ($row['status']==1) {
                     echo "<td><img src='images/001_18.png' width='20'></td>";
                  } else {
                     echo "<td><img src='images/001_19.png' width='20'></td>";
                  }
                  echo"<td>".$row['nombre']."</td>";
                  echo"<td>".$row['descripcion']."</td>";
                  switch ($row['tipo']) {
                  case 'pdf':
                        echo"<td><img src='images/pdf.png' width='70' height='70'></td>";
                     break;
                  case 'docx':
                        echo"<td><img src='images/doc.png' width='70' height='70'></td>";
                     break;
                  case 'xlsx':
                        echo"<td><img src='images/xls.png' width='70' height='70'></td>";
                     break;
                  case 'html':
                        echo"<td><img src='images/html.png' width='70' height='70'></td>";
                     break;
                  case 'txt':
                        echo"<td><img src='images/txt.png' width='70' height='70'></td>";
                     break;
                  case 'zip':
                        echo"<td><img src='images/zip.png' width='70' height='70'></td>";
                     break;
                        
                  default:
                        echo"<td><img border=\"0\" src=\"temporaty/".$row['nombre_image']."\" width='70' height='70'></a></td>";
                     break;
                  }
                  echo "<td>&nbsp;&nbsp;<input style=\"width: 13px;height: 13px;\" type='checkbox' name='delete[]' id='delete' value='" . $row['id_files'] . "'><ul class=\"tinybox\"><li onclick=\"TINY.box.show({url:'libs/detalles.php',post:'id=" . $row['id_files'] . "',width:500,height:200,opacity:20,topsplit:3})\"><img  title=\"Ver detalles\" src=\"images/detailed.png\"></li></ul></td>";
               echo '</tr>';
            }   
   echo '</table></div>';   
   echo "</form>";
}else{
   echo"<div id='mensajevacio' align=\"center\">No hay archivos por el momento</div>";
}
?>

Y con esto podemos dar por finalizado este gran avance, ayúdenos a mejorarlo dado que aun no se pueden colocar datos obligatorios! y recuerden toda duda o crítica estará bienvenida.

Espero lo disfruten amigos!!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.