![](data:image/svg+xml;charset=utf-8,<svg height="256px" width="256px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="400px" width="1000px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
JavaScript est l'un des langages de programmation les plus populaires...
Excel
Comment obtenir le nom, la taille et le type d’un fichier en javascript ?
À l’issue de ce tutoriel, vous serez capable d’obtenir le nom, le type et la taille d’un fichier avant de l’envoyer au serveur, en utilisant javascript.
Contexte
L’une des fonctionnalités les plus couramment exploitées du Web est la capacité de choisir des fichiers locaux sur l’appareil de l’utilisateur et d’interagir avec eux. Cette fonctionnalité permet aux utilisateurs de sélectionner des fichiers, de les télécharger sur un serveur (par exemple, pour télécharger des photos ou envoyer des documents fiscaux, etc.), mais elle offre également la possibilité aux sites Web de les lire et de les manipuler sans avoir à transférer les données sur le réseau.
Comment Obtenir les Détails d’un Fichier en JavaScript ?
L’interaction avec des fichiers locaux sur le navigateur est une fonctionnalité essentielle. Voici comment obtenir des informations sur un fichier avant de l’envoyer ou de l’utiliser dans une application web :
Créez un Formulaire avec un Champ de Fichier
<form>
<input type="file" id="fileInput" />
</form>Ajoutez un Gestionnaire d’Événement pour la Sélection de Fichier
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {
// Le code pour obtenir les détails du fichier sera placé ici
});Récupérez le Fichier Sélectionné
À l’intérieur de l’événement de changement, accédez au fichier sélectionné avec fileInput.files[0].
const selectedFile = fileInput.files[0];Obtenez les Détails du Fichier
Pour obtenir le nom, la taille et le type du fichier, accédez aux propriétés de l’objet File. Voici comment :
- Nom du Fichier :
const fileName = selectedFile.name;- Taille du Fichier (en octets) :
const fileSize = selectedFile.size;- Type de Fichier (type MIME) :
const fileType = selectedFile.type;Utilisez les Informations du Fichier Selon Vos Besoins
Tester dans l’environnement Javascript
Vous pouvez utiliser ces informations pour afficher le nom du fichier à l’utilisateur ou effectuer des opérations basées sur le type ou la taille du fichier. Par exemple, vous pourriez vérifier si le fichier est dans un format attendu ou s’il dépasse une certaine taille.
Exemple Complet :
<!DOCTYPE html>
<html>
<head>
<title>Obtenir les Détails d'un Fichier</title>
</head>
<body>
<form>
<input type="file" id="fileInput" />
</form>
<script>
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {
const selectedFile = fileInput.files[0];
if (selectedFile) {
const fileName = selectedFile.name;
const fileSize = selectedFile.size;
const fileType = selectedFile.type;
console.log('Nom du Fichier :', fileName);
console.log('Taille du Fichier (en octets) :', fileSize);
console.log('Type de Fichier :', fileType);
}
});
</script>
</body>
</html>Ces étapes simples fournissent des informations utiles sur les fichiers sélectionnés par l’utilisateur pour diverses applications web.
Une variante de code
Voici une variante du code JavaScript pour obtenir les détails d’un fichier avec une structure HTML légèrement différente.
<!DOCTYPE html>
<html>
<head>
<title>Obtenir les détails d'un fichier</title>
</head>
<body>
<form>
<label for="fileInput">Sélectionnez un fichier :</label>
<input type="file" id="fileInput" />
</form>
<script>
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {
const selectedFile = fileInput.files[0];
if (selectedFile) {
const fileName = selectedFile.name;
const fileSize = selectedFile.size;
const fileType = selectedFile.type;
console.log('Nom du fichier :', fileName);
console.log('Taille du fichier (en octets) :', fileSize);
console.log('Type de fichier :', fileType);
}
});
</script>
</body>
</html>
Dans cette variante, nous avons ajouté une étiquette (label) pour le champ de fichier (input), ce qui permet d’améliorer l’accessibilité et la convivialité de la page web en fournissant une indication claire à l’utilisateur sur l’utilisation du champ de fichier. Cela rend l’expérience utilisateur plus conviviale et conforme aux meilleures pratiques en matière de conception de formulaires web.
Autres articles
L'arrondi à deux décimales est une opération courante lors du...
Cet article explore chacun des types de boîtes de dialogue...
Ce guide explorera les différentes manipulations de formulaire en JavaScript,...
Les fonctions fléchées, introduites dans ECMAScript 6 (ES6), offrent une...
JavaScript est un langage de programmation côté client largement utilisé...
Recent Posts
Les types d’immobilisations comptables : comprendre la structure de l’actif immobilisé
Les immobilisations représentent l’ensemble des biens durables que possède une entreprise pour les besoins de…
6 heures ago
Immobilisations financières : Définition, Catégories principales, Exemples d’écriture comptable
Ce guide présente les principales écritures comptables associées aux immobilisations financières, illustrées par des exemples…
7 heures ago
Immobilisations incorporelles : Définition, Critères de comptabilisation, Cas particuliers + Modèle Excel
Les immobilisations occupent une place centrale dans le cadre de la gestion comptable d’une entreprise.…
8 heures ago
Immobilisation corporelle : Définition, traitement comptable et exemples
Les immobilisations corporelles, qu’il s’agisse de bâtiments, de machines ou de véhicules, représentent souvent des…
9 heures ago
15 Exercices corrigés – Analyser la syntaxe d’une phrase
Analyser la syntaxe d’une phrase, c’est comprendre comment les mots s’organisent entre eux pour produire…
18 heures ago
📜 Comment analyser un texte poétique ? La manière avant l’art
Lire un poème, c’est entrer dans un univers condensé, sonore, parfois déroutant. Trop souvent, on…
19 heures ago