En este tutorial, construiremos un file upload múltiple usando DropzoneJS, mientras que nuestro backend será soportado por el lenguaje PHP. En mi caso utilizare WAMP Server.
La estructura de nuestro proyecto será la siguiente:
El archivo dropzone.js es la libreria javascript principal.
El archivo index.php es el formulario en el que se arrastran las imágenes para subirlas a la carpeta uploads que se encuentra dentro del proyecto.
El archivo upload.php es el archivo backend que soporta la subida de archivos internamente.
Dentro de la carpeta css están los archivos de estilos dropzone.css y style.css en caso de dar un poco de diseño al formulario.
Dentro de la carpeta uploads se almacenará los archivos una vez arrastrados al formulario de subida.
Pueden bajar el proyecto completo del siguiente enlace del Google Drive: Descargar Proyecto.
Una vez entendido esto bajamos el archivo zip, descomprimimos y copiamos toda la carpeta dropuploadonly al directorio www del WAMP Server por defecto la ruta es C:\wamp\www\ en caso no usemos wamp podemos buscar la carpeta www del apache.
Para probar abrimos el navegador y entramos a la dirección http://localhost/dropuploadonly/index.php
Al arrastrar un archivo podemos darnos cuenta que se almacena automáticamente en la ruta C:\wamp\www\dropuploadonly\uploads
En caso de requerir la pre-visualización de los archivos ya existentes en la carpeta almacén de archivos pueden bajar del Google Drive: Este otro proyecto, la estructura es la misma del ejemplo básico solo la carpeta tiene otro nombre (dropsample), a fin de no afectar al ejemplo básico.
Buena herramienta. Se ve bastante sencilla de usar.
ResponderEliminarSaludos