Explication détaillée de l'API de téléchargement de fichiers dans les compétences JavaScript_javascript

Pour les programmeurs Web, gérer le téléchargement de fichiers sur des pages Web est toujours une chose gênante. Dans le passé, nous ne pouvions pas télécharger d'images par glisser-déposer, nous ne disposions pas non plus d'une technologie de téléchargement Ajax complexe et nous gérions rarement les téléchargements par lots de plusieurs fichiers. Nous ne pouvons pas non plus obtenir d'informations pendant le processus de téléchargement, à moins qu'elles ne soient obtenues du serveur une fois le téléchargement terminé. Parfois, vous constatez que le fichier téléchargé est inapproprié une fois le téléchargement terminé !

Aujourd'hui, la révolution HTML5, la naissance des navigateurs modernes et la mise à niveau de JavaScript nous ont donné la possibilité d'utiliser Javascript et les éléments input[type=file] pour obtenir des informations sur le processus de téléchargement de fichiers.

Voyons comment utiliser ces API de téléchargement de fichiers !

Accéder aux informations de la liste des fichiers à télécharger

Si vous souhaitez obtenir la liste des fichiers à télécharger dans toutes les entrées[type=file], vous devez utiliser l'attribut files :

// Assuming <input type="file" id="upload" multiple>

var uploadInput = document.getElementById('upload');

uploadInput.addEventListener('change', function() {
 console.log(uploadInput.files) // File listing!
});

Malheureusement, cette FileList n'a pas de méthode appelée forEach, nous ne pouvons donc utiliser que des techniques de bouclage à l'ancienne pour parcourir la FileList :

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {
 console.log(files[i]);
}

Un point très important, il y a un attribut length dans FileList.

Obtenir des informations sur un seul fichier téléchargé

Chaque objet fichier dans FileList stocke une grande quantité d'informations sur le fichier, notamment la taille du fichier, le type MIME du fichier, l'heure de la dernière modification, le nom du fichier, etc. :

{
 lastModified: 1428005315000,
 lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
 name: "profile.pdf",
 size: 135568,
 type: "application/pdf",
 webkitRelativePath: ""
}

La plus grande utilité de ces informations de base pour nous est que nous pouvons vérifier les fichiers avant de les télécharger. Par exemple, vous pouvez vérifier le type et la taille du fichier :

var maxAllowedSize = 500000;

for (var i = 0, fileCount = uploadInput.files.length, totalSize = 0; i < fileCount; i++) {
 totalSize += files[i].size;
 if(totalSize > maxAllowedSize) {
 // Notify the user that their file(s) are too large
 }

 if(files[i].type != 'application/pdf') {
 // Notify of invalid file type for file in question
 }
}

Si la taille du fichier téléchargé par l'utilisateur est trop grande, dépasse la plage autorisée ou si le type de téléchargement est incorrect, vous pouvez empêcher l'utilisateur de télécharger, puis lui donner les invites nécessaires expliquant pourquoi le téléchargement ne peut pas réussir.

Ce qui précède est une brève introduction à l'API de téléchargement de fichiers. J'espère qu'elle sera utile à l'apprentissage de chacun.