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