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.
¿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]
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
Tengo problemas al subir archivos con tildes y ñ
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
Como puedo hacer, que ademas de esos campos, me almacene un dato que viene desde un input?
Hay una opción para cuando se muestren ya subidos se puedan borrar allí mismo
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??
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
Excelente! mil gracias por compartir, fue la mejor explicación, y lo pude adaptar en tiempo record a mi proyecto, Gracias!
Lo de dwescarga no sirve
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.
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 .
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.
Son de gran ayuda tus herramientas
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.
como comprar 156 sistemas
Hola Cristopher
Accede a esta pagina y presiona el boton Comprar
https://www.baulphp.com/downloads/descargar-156-sistemas-php-mysql/
Luego sigue los pasos de la pasarela y ya podras pagar, una vez pagado el monto se te mostrara un enlace para descargar el producto.
Saludos