Como subir imagenes/archivos usando el plugin Dropzone.js y PHP

 in Javascript by

El plugin Dropzone.js es el plugin mas popular que sirve para subir archivos usando la funcion Drag and Drop o Arrastrar y Soltar.

En este articulo vamos a implementar el plugin Dropzone.js y veremos un pequeño ejemplo.

Basicamente lo que hace Dropzone.js es que habilita un espacio en nuestra pagina donde vamos a poder arrastrar un archivo desde nuestra PC y soltarlo en este espacio o zona de Soltar (dropzone) y los archivos que arrastremos a esta zona se van a subir mediante un script de subida de archivos previamente preparado.

Descargar Dropzone.js

Para descargar dropzone.js simplemente vamos a usar las URLs de la libreria que estan en la pagina oficial.

Esto va en el HEAD del documento HTML.

<script src="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone-min.js"></script>
<link href="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone.css" rel="stylesheet" type="text/css" />

Podemos poner esas 2 lineas en nuestro documento HTML para que se agregue la libreria Dropzone.js desde internet o tambien podemos tomar esas URLs para descargar los archivos y despues agregarlos de manera local.

Implementar Dropzone.js

En el BODY de nuestro HTML vamos a crear un formulario y dentro del formulario debe ir un elemento file.

<form class="dropzone" id="mydropzone" method="post" enctype="multipart/form-data">
      	
<input type="file" name="file" />

</form>

Para activar el plugin dropzone vamos a agregar el siguiente script.

<script type="text/javascript">
	myDropzone = new Dropzone("#mydropzone", { url: "./upload.php"});
</script>

Aqui invocamos a un archivo PHP llamado upload.php que va a servir para subir el archivo.

Subir imagenes y archivos al servidor con PHP

Para subir los archivos de manera facil y rapido vamos a usar el siguiente script upload.php.

<?php
   if (file_exists($_FILES["file"]["name"])){
      echo "<h3>Archivo Existe</h3>";
   } else {
      move_uploaded_file($_FILES["file"]["tmp_name"], $_FILES["file"]["name"]);
      echo "<h3>Subido exitosamente.</h3>";
   }
?>

Y listo con todo esto ya puede funcionar nuestro ejemplo.

Resultado

Leave a comment