Lenguaje PHP

Subir archivos arrastrar y soltar con PHP, jQuery

Subir archivos arrastrar y soltar con PHP. En este artículo veremos el tema de cargar archivos al servidor usando la tecnología de arrastrar y soltar. Recordemos, que la carga de archivos es una función muy común y necesaria para implementar en la mayoría de los proyectos web.

La carga de ficheros es muy importante por ejemplo cuando estamos realizando un sistema de productos ya sea para restaurant, clínica y/o tienda, etc.

Subir archivos arrastrar y soltar con PHP, jQuery

En muchos casos es necesario la carga de archivos arrastrando y soltando ficheros. Además, muchas grandes compañías como cPanel, Wordpres, entre otras tienen esta opción incorporada. Así que, si estás buscando este tipo de sistemas estás aquí en el lugar correcto.

Subir archivos arrastrar y soltar con PHP, jQuery
Subir archivos arrastrar y soltar con PHP, jQuery

¿Qué recursos usaremos para este sistema?

Usaremos varios lenguajes de Programación y también como almacenamiento la base de datos MySQL, veamos los recursos necesarios.

Lenguaje de marcas HTML5.- Es la encargada de visualizar la interfaz gráfica del presente sistema web

Lenguaje PHP.- Es el motor que realizaría la conexión con el servidor y además realizaría la carga de archivos.

jQuery.- Lenguaje de programación que se encargara de invocar al PHP para que realice el proceso de carga y almacenamiento.

MySQL.- Nos ayudara para almacenar las imágenes cargadas en el formulario

Librería BootStrap.- Nos permite crear páginas web elegantes y responsivas.

Biblioteca DropzoneJS.- Es una biblioteca de código abierto que proporciona cargas de archivos de arrastrar y soltar con vistas previas de imágenes.

Estructura de archivos: Subir archivos arrastrar y soltar con PHP

En este ejemplo hemos utilizado el plugin DropzoneJS jQuery para manejar la carga de archivos de arrastrar y soltar. También hemos utilizado PHP para cargar los archivos en el servidor e insertar detalles de archivos en la tabla de base de datos MySQL.

Así que vamos a empezar la codificación. Antes de comenzar, eche un vistazo a los principales archivos utilizados para este tutorial y demostración.

Index.php.- Es el archivo que será encargado de mostrar la interfaz de subida de archivos
file_upload.php.- Es el motor y su función es conectarse con MySQL. Además, subir el archivo al servidor y los datos de los archivos a una tabla en MySQL.
Dropzone.js.- Este archivo que está escrito con jQuery nos proporciona la opción de arrastrar y soltar los archivos para proceder con la carga de ficheros.
dropzone.css.- Controla la interfaz de estilos de la biblioteca que será mostrado en el BackEnd.

Procesos para subir archivos arrastrar y soltar con PHP

Primer paso: Crear la base de datos y la tabla

El punto más relevante de este sistema es almacenar la información de la base de datos para posteriormente obtener la información de la imagen y devolverlo en etiquetas HTML para que sean visibles en el navegador. Sin embargo, para almacenar la información de cada subida en MySQL Database, necesitaremos dos cosas: Base de datos y una tabla.

La base de datos tendrá como nombre “php_subir” y la tabla tendrá como nombre “uploads“. Recordemos, que el nombre de la base de datos y la tabla podemos personalizarlo a nuestro antojo, pero también debemos de cambiar en los archivos donde se les llaman, por ejemplo en el archivo de conexión, etc.

-- Base de datos: `php_subir`

CREATE TABLE `uploads` (
  `id` int(11) NOT NULL,
  `file_name` varchar(255) NOT NULL,
  `upload_time` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `uploads`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `uploads`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Segundo paso: Crear conexión PHP a MySQL

Una vez que tengamos creado la base de datos y la tabla debemos de realizar la conexión desde PHP a MySQL usando las credenciales de MySQL. Para este objetivo, crearemos un fichero llamado “db_connect.php” y en él se establecerá la conexión usando como variable “$conn” y la función “mysqli_connect“, en esta función se declarara las credenciales de MySQL y el nombre de la base de datos.

<?php

/* Declaramos las variables de conexion al servidor MySQL */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "php_subir";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>

Tercer paso: Incluir la biblioteca de plugin Dropzone

Esta biblioteca nos brinda la posibilidad de arrastrar nuestros ficheros para subirlo al servidor y en tal sentido debemos declarar en la etiqueta head los archivos necesarios para que se ejecute el evento mencionado. Veamos el ejemplo.

// Declaramos los archivos de la Biblioteca Dropzone
<link rel="stylesheet" type="text/css" href="css/dropzone.css" />

// Declaramos el fichero jQuery para los efectos.
<script type="text/javascript" src="js/dropzone.js"></script>

Cuarto paso: Formulario de carga de archivos HTML

Ahora en el archivo index.php, crearemos el formulario HTML de carga de archivos. Solo necesitamos etiquetas de apertura y cierre de formularios sin ningún elemento de formulario. Solo necesitamos atributos de acción y clase en la etiqueta de formulario. El atributo action utilizado para realizar la carga de archivos del lado del servidor. La clase dropzone es el identificador de la biblioteca Dropzone.

<h2>Ejemplo: Subir archivos arrastrar y soltar con PHP, jQuery</h2>   
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cargar Archivos Usando Drag and Drop</h3>
</div>
<div class="panel-body">
<div class="col-lg-12">

<div class="file_upload">
<form action="file_upload.php" class="dropzone">
    <div class="dz-message needsclick">
        <strong>Arrastra archivos a cualquier lugar para subirlos.</strong><br /><br />
        <span class="note needsclick">
        <span class="glyphicon glyphicon-open" aria-hidden="true" style="font-size:60px;"></span>
        </span>
    </div>
</form>       
</div>

</div>    
</div>    
</div>

Quinto paso: Subir archivos en el servidor con PHP

Una vez que todo el proceso de jQuery con la interfaz de carga, necesitamos que el fichero suba en una determinada carpeta al servidor llamado “uploads” y la información del archivo almacenado en MySQL mediante el comando “INSERT INTO“. Este fichero tendrá como nombre “file_upload.php“.

<?php 
// Incluimos el fichero de conexion con el servidor
include_once("db_connect.php");
if(!empty($_FILES)){     
    $upload_dir = "uploads/";
    $fileName = $_FILES['file']['name'];
    $uploaded_file = $upload_dir.$fileName;    
    if(move_uploaded_file($_FILES['file']['tmp_name'],$uploaded_file)){
        //Insertamos la informacion en la tabla
        $mysql_insert = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')";
        mysqli_query($conn, $mysql_insert) or die("database error:". mysqli_error($conn));
    }   
}
?>

CONCLUSIÓN: Subir archivos arrastrar y soltar con PHP

Subir archivos arrastrar y soltar con PHP. Si somos programadores web, este articulo les fascinara y podrán incorporar herramientas versátiles para ayudar al usuario a manejar el sistema con lo último en tecnología.

Grandes compañías de internet ya tienen incorporado este modelo de cargar ficheros y nosotros no debemos de quedarnos atrás. Sin embargo, implementar en nuestro sistema no es tan complicado y solo debemos incluir algunas bibliotecas y librerías externas existentes en el mercado.

Este sistema posee una interfaz HTML, BootStrap, Biblioteca DropzoneJS, jQuery y MySQL para almacenar los datos de los archivos subidos. Espero que esta breve explicación les ayude en sus proyectos web.

Descargar Ficheros completos

Para que puedan probarlo, les dejare el ejemplo completo en un archivo ZIP.

[sociallocker id=5099] [/sociallocker]

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

16 comentarios

  1. Hola muy buenos dias
    primero que nada excelente tuto
    pero tengo una pregunta como le podria hacer para mandar un mensaje que el archivo ya existe si esta duplicado el registro en la base de datos

  2. Hola muy buen contenido, aunque seria bueno que por favor me indicaras como se hace para el borrado de los archivos que por error se suben, se que habilitando la opción en dropzone se pueden eliminar pero no se como se hace también de la DB. mil gracias

  3. Hola, excelente código, lo he puesto en local MAMP con PhP 7, he creado la bbdd y la tabla siguiendo tus comentarios pero no funciona, da error 500.. alguna idea??

    1. Hola Angel
      Es posible que sea por la versión del PHP o conexión con la base de datos (Usuario, contraseña de mysql).
      Revisa a detalle la versión PHP y que no sea muy alta.

      Por ultimo, prueba en un servidor de producción.
      El script funciona muy bien, solo son factores externos.

      Saludos

    1. Hola Eric,
      Primeramente revisa que version de PHP posee su servidor. La version recomendable es el php7.0
      No olvides crear la base de datos y vincular con el fichero db_connect.php
      La carpeta de almacenamiento de las imagenes llamada “uploads”.

      Espero que el script una vez configurado funcione para usted.

  4. Hola No esta funcionando el link para poder comprar los 156 sistemas que ofreces.
    Podrias revisarlo asi efectúo la compra.
    Muchas Gracias Nestor y muy buen material .

    1. Hola Eric

      Disculpa por los inconvenientes causados, se trataba de la cache de la pagina, ya ha sido limpiado y todo funciona correctamente.

      Gracias por informar.

  5. Está muy bueno pero como puedo hacer para que me cambie el nombre del archivo subido por ejemplo con time() para que me grabe, la imagen con el nombre por ejemplo: 1483700231.jpg y la inserte en la base de datos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba