Comment récupérer le nom, taille et type d’un fichier en JavaScript

Avant d’envoyer le fichier au serveur pour l’upload, il est toujours important de valider le fichier, en utilisant JavaScript, vous pouvez facilement obtenir des informations sur le fichier et les valider côté client. La ligne de code suivante vous aidera à obtenir le nom du fichier, sa taille, son type et sa date de modification.
 
 

Récupérer le nom du fichier en JavaScript:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
document.getElementById('myFile').files[0].name
document.getElementById('myFile').files[0].name
document.getElementById('myFile').files[0].name

 

Récupérer la taille du fichier en JavaScript:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
document.getElementById('myFile').files[0].size
document.getElementById('myFile').files[0].size
document.getElementById('myFile').files[0].size

 

Récupérer le type du fichier en JavaScript:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
document.getElementById('myFile').files[0].type
document.getElementById('myFile').files[0].type
document.getElementById('myFile').files[0].type

 

Récupérer la date de modification du fichier en JavaScript:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
document.getElementById('myFile').files[0].lastModifiedDate
document.getElementById('myFile').files[0].lastModifiedDate
document.getElementById('myFile').files[0].lastModifiedDate

 

Exemple Complet:

Vous pouvez utiliser le code suivant pour récupérer le nom, la taille et le type du fichier après avoir sélectionné un fichier.
 

Code HTML:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="file" id="myFile" onchange="getFileInfo()"/>
<input type="file" id="myFile" onchange="getFileInfo()"/>
<input type="file" id="myFile" onchange="getFileInfo()"/>

 

Code JavaScript:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function getFileInfo(){
var name = document.getElementById('myFile').files[0].name;
var size = document.getElementById('myFile').files[0].size;
var type = document.getElementById('myFile').files[0].type;
var date = document.getElementById('myFile').files[0].lastModifiedDate;
var info = name+" "+size+" "+type+" "+date;
alert(info);
}
function getFileInfo(){ var name = document.getElementById('myFile').files[0].name; var size = document.getElementById('myFile').files[0].size; var type = document.getElementById('myFile').files[0].type; var date = document.getElementById('myFile').files[0].lastModifiedDate; var info = name+" "+size+" "+type+" "+date; alert(info); }
function getFileInfo(){
    var name = document.getElementById('myFile').files[0].name;
    var size = document.getElementById('myFile').files[0].size;
    var type = document.getElementById('myFile').files[0].type;
    var date = document.getElementById('myFile').files[0].lastModifiedDate;
    
    var info = name+" "+size+" "+type+" "+date;
    alert(info);
}
QCM Javascript

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *