Comunidad de diseño web y desarrollo en internet online

Subir archivos con Uploadify en PHP, MySQL y HTML5 (Version Final!)

Ir a página Anterior  1, 2

Foros de discusión > Aportes

Citar            
MensajeEscrito el 09 Ago 2013 06:34 pm

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 :sueno: :sueno:

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>&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 a un no se puede colocar datos obligatorios y recuerden toda duda o critica estará bienvenida :sueno: :sueno: :sueno:



Espero lo disfruten amigos!! :cool:

Por kakashi2000

Claber

559 de clabLevel

5 tutoriales

Genero:Masculino  

Desarrollador de aplicaciones Web

chrome
Citar            
MensajeEscrito el 23 Sep 2013 10:03 pm
colegas tengo una duda, quiero añadir un nuevo campo y que se registre en la base de datos..!! he tratado por lado y lado y no logro que se registre!!

se que la sentencia es esta la que llama al archivo subirarchivo.php

como podría solucionarlo?

$('#txtdes').bind('change', function(){
$('#file_upload').fileUploadSettings('scriptData','&des='+$(this).val());


});

Gracias!

Por taringero17

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 23 Sep 2013 10:05 pm
colegas tengo una duda, quiero añadir un nuevo campo y que se registre en la base de datos..!! he tratado por lado y lado y no logro que se registre!!

se que la sentencia es esta la que llama al archivo subirarchivo.php

como podría solucionarlo?

$('#txtdes').bind('change', function(){
$('#file_upload').fileUploadSettings('scriptData','&des='+$(this).val());


});

Gracias!

Por taringero17

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 Sep 2013 03:44 pm
colegas tengo una duda, quiero añadir un nuevo campo y que se registre en la base de datos..!! he tratado por lado y lado y no logro que se registre!!

se que la sentencia es esta la que llama al archivo subirarchivo.php

como podría solucionarlo?

$('#txtdes').bind('change', function(){
$('#file_upload').fileUploadSettings('scriptData','&des='+$(this).val());


});

Gracias!

Por taringero17

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 Sep 2013 03:45 pm
colegas tengo una duda, quiero añadir un nuevo campo y que se registre en la base de datos..!! he tratado por lado y lado y no logro que se registre!!

se que la sentencia es esta la que llama al archivo subirarchivo.php

como podría solucionarlo?

$('#txtdes').bind('change', function(){
$('#file_upload').fileUploadSettings('scriptData','&des='+$(this).val());


});

Gracias!

Por taringero17

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 Sep 2013 05:47 pm
Amigo taringero17

Te escribí por inbox, por favor si puedes verlo, si no te sugiero que bajes la nueva versión que subí, ya no usas ese Query.

arriba explico como puede aumentar mas campos.

Saludos

Por kakashi2000

Claber

559 de clabLevel

5 tutoriales

Genero:Masculino  

Desarrollador de aplicaciones Web

chrome
Citar            
MensajeEscrito el 01 Feb 2014 01:09 pm
Excelente aporte, bastante completo y personalizable, muchas gracias.

Por Tecnofarina

0 de clabLevel



 

Soporte ténico, diseño web

opera
Citar            
MensajeEscrito el 02 Feb 2014 04:31 pm
Hola a todos, soy nuevo en este foro.

Muchas gracias por el aporte, me sirvió de mucha ayuda, pero tengo una duda....

¿se podría quitar el efecto Drag and Drop y usar el típico botón de examinar y elegir el archivo con el explorador? Me lo han pedido y por mas vueltas que le doy no lo consigo.


A ver si alguien que tenga idea puede echarme una mano, saludos y gracias!

Por chusmsanchez

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Feb 2014 02:25 pm
Hola, hacía tempo que no venía a mirar este aporte. Sigo pensando que es demasiado bueno, genial. Aunque también sigo pensando en que mejor haberlo dejado como un sistema para formar galería de fotos. Pensando, por ejemplo, en arquitectos, fotógrafos, muralistas, artistas gráficos y tanta persona que más de las veces se ve obligada a utilizar los célebres sitios como Instagram, Flickr, entre otros, para subir sus trabajos. Pero sé que a muchos no les agrada porque prefieren algo más personal, no para todo el mundo y no estar metidos en un lugar donde hay miles o millones de personas.

Y dentro de las funcionalidades que el sistema debiera tener es la de formar miniaturas dimensionadas en forma proporcional. Para esto hay unos cuantos códigos por ahí y tengo uno de ellos en mi poder, pero opera gracias a un formulario en donde uno debe subir cada foto, una a una y eso es tedioso para un profesional que en su cámara tiene almacenadas decenas de fotos, por ejemplo 150. Ustedes comprenderán lo agotador que es subir una a una 150 fotos!! Se los encargo!

Si a nuestro amigo kakashi2000 le interesa, puedo pasarle el código para que lo pruebe. Aunque en una de ésas estoy haciendo el loco y ya tiene implementado algo similar. No sé, bueno, la pelota está del lado de la cancha de kakashi2000 y de usted depende maestro si tira al arco o no mi propuesta.

Saludos,

Ricardo

Por RicardoIII

13 de clabLevel



Genero:Masculino  

Diseñador y desarrollador Web

chrome
Citar            
MensajeEscrito el 11 Feb 2014 03:40 pm
Hola a todos aquellos que han probado el código de Uploadify, cualquier duda o comentarios saben donde buscarme.

Amigo Ricardo, me encantaría tu aporte mas sin embargo la ideas es hacerlo cada vez mejor, tienes razón en destacar que los profesionalismos son experto en su materia y requieres de un sistema eficaz y rápido, por ello me encantaría poder mejorarlo si tienes la idea de donde podremos adecuar tu aporte con gusto.

Saludos

Por kakashi2000

Claber

559 de clabLevel

5 tutoriales

Genero:Masculino  

Desarrollador de aplicaciones Web

chrome
Citar            
MensajeEscrito el 11 Feb 2014 04:33 pm
Amigo kakashi2000

Te voy a enviar a tu casilla de hotmail, con el mayor de los gustos, uno de los sistemas de galería que tengo. Genial si puedes adaptarlo e introducir la mejora de subir varias fotos y al mismo tiempo, generar las miniaturas.

Un rato más te envío todo.

Gracias desde ya :)

Por RicardoIII

13 de clabLevel



Genero:Masculino  

Diseñador y desarrollador Web

chrome
Citar            
MensajeEscrito el 11 Feb 2014 04:45 pm
Bueno, tengo que finalizar unas cuantas mejoras en el script y lo envío a tu casilla, amigo kakashi2000 :)

Por RicardoIII

13 de clabLevel



Genero:Masculino  

Diseñador y desarrollador Web

chrome
Citar            
MensajeEscrito el 13 Feb 2014 02:37 am
Bueno, dejo acá mi sistema de galería, que espero nuestro amigo Kakashi2000 pueda mejorar, ahora que lo tiene en su poder.

http://www.esm.cl/galeria/

En su minuto, cuando todo esté terminado, podré a disposición de todos el script.

Saludos,

Ricardo

Por RicardoIII

13 de clabLevel



Genero:Masculino  

Diseñador y desarrollador Web

chrome
Citar            
MensajeEscrito el 06 Ago 2014 04:23 pm
saludos muy bueno el sistema me a gustado mucho, pero he estado intentando quitar lo del drap and drop y dejarlo con un boton de examinar pero no logro hacer que me funcione, como puedo hacer que me funcione con un boton de examinar, muchas gracias de antemano.

Por agotaras123

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 25 Ago 2014 09:00 pm
hola me sube los archivos pero no los muestra, donde debo revisar

Por mjzorrilla

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 13 Sep 2014 05:10 pm

mjzorrilla escribió:

hola me sube los archivos pero no los muestra, donde debo revisar


que te dice cuando los intentas subir, te lanza algun tipo de error o solamente no te los muestra?

Por agotaras123

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 01 Dic 2014 12:19 pm
Una duda porque cuando lo subo a un servidor el método "listadoimagenes" no se me activa y en local si veo el listado de lo que tengo subido??? No sale ningun tipo de error
En la base de datos si me guarda los archivos dubidos pero no los veo al estar en un hosting

Alguien me puede ayudar, gracias

Por merlin_

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Feb 2015 04:34 pm
Hola a todos, Amigos programadores, De verdad es un Honor de mi parte Compartir con personas como ustedes, Viva la Programación, A todos los Contribuyentes de esta Pagina, Los Felicito y les agradezco por todo esos buenos códigos que publican,,, EXCELENTES TODOS DE VERDAD. LES AGRADEZCO.... SALUDO DESDE VENEZUELA..... :) :)

Por jose2583

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 17 Dic 2016 08:52 pm
Saludos cordiales esta chida,, cool la aplicacion ..
tengo un pequeño problrma con la ventana de detalle
no la puedo hacer mas grande para visualizar mas campos....
donde pudeo modificar la dimencion de tinybox..

Saludos cordiales.. Quien me puede ayudar

Por carlosbarreto123@hotmail.

0 de clabLevel



 

firefox
Ir a página Anterior  1, 2
Foros de discusión > Aportes

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.