Comment récupérer la taille d'un input file en JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-01-20 12:13:15

Question

Comment puis-je récupérer la taille, en Kb, d'un input du type file en JavaScript ?

Réponse

Pour récupérer la taille, en Kb, d'un fichier envoyé via un formulaire input, du type file, vous pouvez utiliser la propriété JavaScript size :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment récupérer la taille d'un input file en JavaScript ?</title>
</head>  
<body>
<input type="file" id="fichier" onchange="getTaille()"> 
<script> 
function getTaille(){ 
const fichier = document.getElementById('fichier'); 
if (fichier.files.length > 0) { 
for (const i = 0; i <= fichier.files.length - 1; i++)
{
const fichier_taille = fichier.files.item(i).size; 
const taille = Math.round((fichier_taille / 1024));
alert('La taille du fichier est de ' + taille + ' Kb');
} 
} 
} 
</script> 
</body>
</html>

Remarque importante : Il est en outre peu recommandé d'utiliser la propriété size, et plus généralement de détecter la taille d'un fichier coté client. Pour plusieurs raisons, dont principalement des raisons de sécurité, mieux vaut effectuer cette opération coté serveur, en PHP par exemple.

Voici un exemple pour vérifier la taille d'un fichier, coté serveur, en PHP :

// Taille maximum des fichiers en octets
$conf_taille_max = 50000000;

if ((($_FILES['fichier']['size']) > $conf_taille_max) || (($_FILES['fichier']['size']) < 0))
{ 
  echo "Taille du fichier non valide";
}