Hoy veremos cómo usar JavaScript para limitar el tamaño de un archivo que se carga en un input de tipo file. Es decir, solo permitir que se seleccionen archivos menores a determinada cantidad, por ejemplo, 10 Megabytes.
Todo esto lo haremos en el lado del cliente.
Sobre la seguridad
Quiero dejar claro que este método no es para nada confiable. Funciona, y lo hace bien, pero se puede engañar; así que recuerda que siempre debes usar la validación del lado del servidor en donde se sube el archivo.
Te preguntarás entonces para qué limitarlo en el lado del cliente y la razón es la misma por la que validamos formularios: para mejorar la usabilidad de la app.
Si le avisas al usuario que no puede seleccionar un archivo cuyo peso sea mayor al límite, lo sabrá antes de enviar el formulario; en lugar de que le avises hasta que lo haya enviado.
El evento del input
Puedes validar el archivo en cualquier evento (por ejemplo antes de enviar el formulario), yo lo haré en el evento change del input; es decir, cada que el usuario seleccione un archivo comprobaré si su tamaño no sobrepasa el límite.
Debes obtener una referencia al input usando getElementById, querySelector o lo que tú prefieras.
Validar archivo
Dejando claros los conceptos anteriores vamos al código de ejemplo. Tenemos el input de tipo file, así que escuchamos cuando cambie y validamos.
Podemos acceder a los archivos en la propiedad files, que es un arreglo. Para acceder al primero usamos la posición 0 (obviamente).
Cada archivo tiene varias propiedades, entre ellas size que sirve para ver el tamaño del archivo en bytes.
// https://parzibyte.me/blog
const MAXIMO_TAMANIO_BYTES = 2000000; // 1MB = 1 millón de bytes
// Obtener referencia al elemento
const $miInput = document.querySelector("#miInput");
$miInput.addEventListener("change", function () {
// si no hay archivos, regresamos
if (this.files.length <= 0) return;
// Validamos el primer archivo únicamente
const archivo = this.files[0];
if (archivo.size > MAXIMO_TAMANIO_BYTES) {
const tamanioEnMb = MAXIMO_TAMANIO_BYTES / 1000000;
alert(`El tamaño máximo es ${tamanioEnMb} MB`);
// Limpiar
$miInput.value = "";
} else {
// Validación pasada. Envía el formulario o haz lo que tengas que hacer
}
});En el ejemplo puedes ver que además de avisar al usuario que no puede seleccionar un archivo de ese tamaño, limpio el formulario. El límite de peso es de 2 megabytes, mismo que se escribe en bytes al realizar la comparación.
Por cierto, el HTML de ejemplo es el que se ve a continuación. Fíjate en que el input en cuestión tiene el id miInput.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Validar archivos JS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Selecciona un archivo:</h1>
<a href="//parzibyte.me/blog">By parzibyte</a>
<br>
<input id="miInput" type="file">
<script src="script.js"></script>
</body>
</html>
amigo y si quiero utilizar la misma regla pero para mas Archivos?
Hola. Para consultas personalizadas puede contactarme en https://parzibyte.me/#contacto
Muchas gracias por tu codigo JS me ayudo mucho!
Si el post fue de su agrado le invito a compartirlo y seguirme en mis redes
Saludos!