Portada » Lenguaje PHP » Subir archivos arrastrar y soltar con PHP, jQuery

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]

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad