Obtener el tamaño de un archivo con JavaScript

En este artículo, vamos a aprender cómo para obtener el tamaño de un archivo con JavaScript antes de subirlo al servidor ?

Formas extienden la usabilidad de la web. A través de las formas que podemos hacer un montón de cosas tales como reserva de entradas, información de envío, etc. También podemos subir a cabo en el servidor de archivos utilizando los formularios HTML. Pero como desarrollador, es posible que desee poner restricciones en el tamaño del archivo para evitar la sobrecarga de sus servidores con archivos de gran tamaño. JavaScript puede ayudar a salir fácilmente.

En este ejemplo, vamos a escribir un código para cargar un archivo en el servidor. Cuando el usuario carga el archivo, vamos a imprimir el tamaño del archivo en la consola . A continuación se presenta el programa class ella.

Código – HTML

<form method="get" action="/data.php">
<input type="file" name="file">
<input type="submit" value="Upload">
</form>

En este código HTML, se define un elemento de formulario con 2 entradas en él. Uno de ellos es el archivo de entrada que permitirá al usuario carga de archivos. Cuenta con un id de archivo . El otro elemento es el botón de enviar, que envía el formulario al servidor. A continuación, añadir algo de código JavaScript ella.

Código – JavaScript

//Get the file input element by its id 
var file = document.getElementById('file');
//Add a change listener to it.
file.addEventListener('change', function() {
var size = file.files[0].size/1024; //To convert in KB
//Print the final size in KB
console.log(size + 'KB');
});

En este código, en primer lugar definir el archivo de datos variables que tiene el elemento de entrada de archivo. A continuación, añadir un detector de eventos a la misma que va a escuchar for cualquier cambio en ella. Generalmente usamos el cambio class archivo de eventos, ya que cada vez que el usuario selecciona para cargar un archivo nuevo, el estado de cambios de elementos y JavaScript atrapa.

Dentro de la función de devolución de llamada, tenemos un tamaño variable que contendrá el tamaño del archivo. Obtenemos los archivos de entrada de archivos utilizando los archivos matriz. Los file.files [0] medios obtienen el primer archivo de archivos gama de la entrada. A continuación tenemos la propiedad `size` class cada archivo y lo usamos para obtener el tamaño. Dividimos el tamaño por 1024 con el fin de convertirlo en Kilobyte, ya que por for es en bytes.

for, que imprimir la salida de la consola y el usuario se mostrará el tamaño del archivo de su archivo subido .

Si te gusta el artículo, por favor, comparta sus pensamientos en los comentarios a continuación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *