jQuery tiene muchos tipos de complementos de carga de archivos que se utilizan para cargar varios tipos de archivos y se pueden procesar más en el backend. Por lo general, PHP se usa ampliamente como lenguaje de fondo con llamadas ajax. También tenemos complementos jQuery dinámicos donde podemos arrastrar y soltar los archivos.
Algunos de los complementos de carga de archivos son:
- Fine-Uploader
- Carga de archivos JQuery
- Subir
- Subir
- carga de piedra de forma
- Zona de descenso
Muchos más están disponibles.
Enlace CDN:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js” integridad=”sha256-fegGeSK7Ez4lvniVEiz1nKMx9pYtlLwPNRPf6uc8d+8=” crossorigin=”anónimo”>
</script >
Ejemplo: El siguiente ejemplo se implementa utilizando el complemento Dropzone y las bibliotecas de CDN necesarias para el código.
<!DOCTYPE html> <html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity= "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js" integrity="sha256-fegGeSK7Ez4lvniVEiz1nKMx9pYtlLwPNRPf6uc8d+8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity= "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity= "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> </script> <style> body { padding: 2%; } </style> </head> <body> <form action="/file-upload" class="dropzone"> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form> </body> </html>
Producción:
Conclusión: en el ejemplo anterior, podemos arrastrar muchos documentos a la vez. Podemos realizar la misma operación solo con el código JavaScript y también podemos poner restricciones en el tamaño y el tipo del archivo.
Publicación traducida automáticamente
Artículo escrito por dadimadhav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA