kakashi2000 escribió:
Actualizado!!
Gestor de archivos Uploadify en PHP, HTML5, CSS3 y ahora Drag and Drop!!!
Hola amigos por fin lo mas esperado de este post.
Por fin hemos terminado la actualización del nuevo sistema de Gestor de archivos ahora mas dinámico
fue un gran esfuerzo por esta mejora 
Para todos aquellos que lo han solicitado tanto para sus proyectos.
En este post Anterior muestro la versión 1.0
Ver tutorial anterior
Explicaremos las mejoras realizadas al proyecto.
Actualizacion
Drag and Drop con HTML5 y JQUERY
Anteriormente se uso el boton de examinar con ActionScript de Flash, el cual podias anexas mas de 1 archivo ala vez, ahora podras solo arrastras tus archivos hacia el area de carga y solo subir, asi de listo.
Aumentar los campos de captura
En la version anterior fue muy complicado aumentar mas campos para la BD, ahora podrás colocar los campos ke necesites y cargarlos ala BD.
Instalación de Uploadify
- 1.- Antes que nada descarga los archivos desde este link
Descargar
Deberas tener lo siguiente en lista.
- 2.- Corre el siguiente Query para crear la tabla donde se almacenaran los datos.
Código MySQL :
-- -- 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
- 3.- Modifica los datos de conexion ala BD
Dentro del directorio libs\conector.inc.php
Código PHP :
<?php $Server="localhost"; $User="root"; $Pass="pass"; $DataBase="test"; ?>
Una vez realizado los paso deberás tener algo así.
Ahora...
Te explico a detalle los ajustes técnicos.
Funcionalidades de Drag and Drop
Dentro del fichero js\draganddrop.js
Este codigo te ayudara a mostrar la cantidad de archivos a mostrar dentro de las imagenes precarcadas
Código Javascript :
// 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 quedo como el anterior acepta, jpg, png, bmp, pdf, doc, xls, txt, html y pttx.
Código Javascript :
// 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 de adicionar mas campos deberas los inputs que necesites, despues te iras al js para agregarlos a modificarlos.
Código Javascript :
// 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 separarlos por coma.
Código Javascript :
nombre: $('#nombre').val(), descripcion:$('#desc').val()Depues deberas ir a directorio raiz y abrir el archivo upload.php
y agregar o modificar las variables $_POST.
Código PHP :
/*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 PHP :
//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 esta en el directorio libs\listadodeimagenes.php
Código PHP :
<?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> <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 a un no se puede colocar datos obligatorios y recuerden toda duda o critica estará bienvenida
Espero lo disfruten amigos!!
