Comunidad de diseño web y desarrollo en internet online

Subir archivos con Uploadify en PHP, MySQL y HTML5

Hola amigos! Les traigo para ustedes esta aplicación actualizada y basada en el tutorial
Carga de archivos con Uploadify en PHP y MYSQL. Ahora con nuevas funciones y más ordenado, código limpio y mejorado con HTML5 y CSS3.

Primeramente empiezo mencionado las características de esta aplicación.

  1. XAMPP Control Panel v3.1
  2. Windows 8


Sólo les comentaré de la mejoras y notas u observaciones. Al final les dejo el link de descarga de los archivos.

Sólo descarguen el archivo, creen la BD con la tabla y listo!, no tienen que modificar nada y obviamente modifiquen el archivo conector.inc.php que está dentro de libs.

Código :

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

?>


Si todo sale bien deberá quedar la nueva interfaz de la siguiente manera.



Les mostraré lo nuevo que se ha modificado a esta gran aplicación. Primero la tabla fue alterada con nuevos campos que nos ayudará a imprimir en lista una representación gráfica de lo que se ha subido.


Lo he adoptado para soportar diferentes tipos de archivos a subir. Cuando sube el archivo verás el tipo de ícono que representa según el tipo archivo. Y lo más importante es que pueden eliminar del archivo tanto el registro de la tabla como el archivo mismo.



Ustedes pueden agregar más de un tipo de archivo mediante el archivo nuevaimagen.js

Código :

$(document).ready(function() {
    $("#file_upload").fileUpload({
        'uploader': 'uploadify/uploader.swf',
        'cancelImg': 'uploadify/cancel.png',
        'script': 'libs/subirarchivo.php',

        'folder': 'uploads',
        'buttonText': 'examinar',
        'checkScript': 'uploadify/check.php',
        'fileDesc': 'Archivos',
        'auto':false,
        //Extensiones permitidas para carga de los archivos
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png;*.xlsx;*.docx;*.html;*.txt;*.pdf;*.zip',
      
      //Puede ingresar mas de 1 archivo a la vez, false solo 1 archivo
        'multi': true,
        'displayData': 'percentage',
        onComplete: function (){
     verlistadoimagenes();
            $("#txtdes").val('');
        }

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


    });

})


En este mismo código lo más importante y fabuloso es que puedes activar o desactivar la carga múltiple de archivos o bien la carga individual de archivos, sólo modificando el valor "multi:true o false".

Código :

//Puede ingresar mas de 1 archivo a la vez, false solo 1 archivo
        'multi': true,
        'displayData': 'percentage',


Con esto no tendrás ningún problema en entenderlo, espero les guste este nuevo cambio, intento mejorar la aplicación poniendo modo de vista, grid o list.

Aquí les pongo la el link para que descarguen y lo disfruten. Descargar

¿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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate