Comment obtenir la valeur de la taille du fichier téléchargé en JavaScript

Posté Par: Windows2022tutosur: janvier 10, 2023Dans: TechPas De Commentaires

Comment obtenir la valeur de la taille du fichier téléchargé en JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment obtenir la valeur de la taille du fichier téléchargé en JavaScript. L’objectif de ce didacticiel est de vous permettre d’afficher la taille du fichier téléchargé. Cela couvrira toutes les fonctions de base qui permettront de rechercher une liste. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.

Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé sur n’importe quel système qui a besoin d’afficher la taille de fichier spécifique. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Afficher la valeur de la taille du fichier téléchargé. Faisons donc le codage.

Avant de commencer :

Ceci est le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code n’affichera que le formulaire et le bouton de téléchargement. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a href=" class="navbar-brand">Sourcecodester</a> 
	<div class="col-md-6 well">
		<h3 class="text-primary">How to get Uploaded File Size Value</h3>
		<hr style="border-top:1px dotted #ccc;"/>
			<div class="form-inline">
				<h4>UPLOAD FILE HERE</h4>
				<input type="file" id="file" class="form-control" style="width:100%;"/>
				<button onclick="getFileSize()" class="btn btn-primary">Upload</button>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code obtiendra la taille du fichier téléchargé à partir du formulaire de saisie html. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

function convertBytes(num) {
	let diff = num < ;
 
	let units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 
	if (diff){
		num = -num;
	}
 
	if (num < 1){
		return (diff ? '-' : '') + num + ' B';
	}
 
	let exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1);
 
	num = Number((num / Math.pow(1000, exponent)).toFixed(2));
 
	let unit = units[exponent];
 
	return (diff ? '-' : '') + num + ' ' + unit;
}
 
function getFileSize(){
	let file = document.getElementById('file').files[];
	let fileName = file.name;
	if(file){
		document.getElementById('result').innerHTML = '<h5><strong>Filename:</strong> '+fileName+'</h5><h4>Uploaded file size is <label style="color:blue;">'+convertBytes(file.size)+'</label></h4>';
	}
}

Dans le code ci-dessus, nous allons d’abord créer une méthode appelée convertBytes()cette fonction convertira la taille en octets dans un format compressif tel que ko, gb, mb, etc. Et ensuite, nous créerons une méthode appelée getFileSize(), dans la première ligne de cette fonction, nous allons lier notre identifiant d’entrée de fichier afin que nous puissions obtenir les informations réelles du fichier téléchargé. Afin d’afficher la taille du fichier sur la page html, nous appellerons simplement le convertBytes() fonction et ajoutez-y la taille du fichier téléchargé.

Sortir:

Les Comment obtenir la valeur de la taille du fichier téléchargé en JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment obtenir la valeur de la taille du fichier téléchargé en JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici