téléchargement de fichiers HTML5 javascript Astuces FileReader API_javascript

La fonction de téléchargement de fichiers est désormais de plus en plus courante. Tous les sites de réseaux sociaux et de médias, tels que Youku Video, Weibo, etc., proposent des fonctions telles que le téléchargement de photos et de vidéos. Mais dans le passé, les programmeurs WEB savaient que télécharger des fichiers à l'aide de formulaires HTML était très gênant. Surtout si vous souhaitez connaître certains attributs des fichiers téléchargés par l'utilisateur, vous devez attendre que le téléchargement soit terminé.

Le téléchargement d'éléments inconnus sur le serveur peut entraîner des problèmes de sécurité, ou il peut être trop volumineux, dépasser la taille autorisée et gaspiller de l'espace. Et bien désormais, la technologie WEB s’améliore, et HTML5 a apporté beaucoup de bonnes choses. Cette API FileReader vous permet d'obtenir certaines propriétés de base du fichier téléchargé avant que l'utilisateur ne le télécharge.

Code HTML

Cette API FileReader fonctionne de la même manière que l'API File et nécessite l'utilisation d'éléments input[type="file"] :

<-- 一个能上传多媒体文件的表单 -->
<input type="file" id="upload-file" multiple />

<-- 显示图片的地方 -->
<div id="destination"></div>

Dans l'article File API, vous trouverez des informations détaillées sur les fichiers qui peuvent être lus, telles que l'adresse, le volume, la taille, le type de fichier, etc.

JavaScript

Dans cet exemple, nous utilisons le champ du formulaire de saisie pour télécharger une image Lorsque l'utilisateur sélectionne une image sur son ordinateur, l'image sera affichée sur la page :

document.getElementById('upload-file').addEventListener('change', function() {
 var file;
 var destination = document.getElementById('destination');
 destination.innerHTML = '';

 // 循环用户多选的文件
 for(var x = 0, xlen = this.files.length; x < xlen; x++) {
 file = this.files[x];
 if(file.type.indexOf('image') != -1) { // 非常简单的交验

  var reader = new FileReader();

  reader.onload = function(e) {
  var img = new Image();
  img.src = e.target.result; // 显示图片的地方

  destination.appendChild(img);
  };
  
  reader.readAsDataURL(file);
 }
 }
});

Dans cet exemple, nous utilisons la méthode readAsDataURL dans FileReader pour convertir le contenu de l'image en une chaîne codée en base64, puis l'affichons à l'aide de l'URI de données de l'image. Les autres méthodes de lecture FileReader incluent readAsText, readAsArrayBuffer et readAsBinaryString, etc.

Avec cette API FileReader, nous pouvons éviter aux utilisateurs de télécharger d'abord des fichiers sur le serveur, et nous pouvons les exploiter sur le client du navigateur. Ce prétraitement avant le téléchargement sur le serveur est nécessaire.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.