JavaScript utilise FileReader pour obtenir un effet d'aperçu du téléchargement d'image

Cet article présente principalement JavaScript pour utiliser FileReader pour obtenir un effet de prévisualisation du téléchargement d'images. Il a une certaine valeur de référence pour l'apprentissage de JavaScript. Les amis intéressés par JavaScript peuvent se référer à cet article. >FileReader fait partie de l'API de fichiers HTML5. Il implémente un mécanisme de lecture de fichiers asynchrone. Vous pouvez considérer FileReader comme XMLHttpRequest, la seule différence est qu'il lit le

système de fichiers

au lieu du serveur distant. Afin de lire les données du fichier , FileReader propose les méthodes suivantes.

readAsText(file,encoding) : lit le fichier en texte brut et enregistre le fichier lu dans l'attribut de résultat.
readAsDataURL(file) : lit le fichier et enregistre le fichier dans l'attribut de résultat sous la forme d'URI de données.
readAsBinaryString(file) : lit le fichier et enregistre une
• chaîne

  dans l'attribut de résultat. Chaque caractère de la chaîne représente un octet.

readAsArrayBuffer(file) : Lit le fichier et enregistre un
• ArrayBuffer contenant le contenu du fichier

  dans l'attribut result.

un attribut multiple indique la prise en charge de plusieurs images

• 
  

<p id="wrapper">    
 <input id="fileUpload" type="file" multiple /><br />
 <p id="image-holder"> </p>
</p>

FileReader Peut prendre en charge les navigateurs Internet Explorer 10+, FireFox, Chrome et Opera.

$("#fileUpload").on('change', function () {
 
  //获取上传文件的数量
  var countFiles = $(this)[0].files.length;
 
  var imgPath = $(this)[0].value;
  var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  var image_holder = $("#image-holder");
  image_holder.empty();
 
  if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
    if (typeof (FileReader) != "undefined") {
 
      // 循环所有要上传的图片
      for (var i = 0; i < countFiles; i++) {
 
        var reader = new FileReader();
        reader.onload = function (e) {
          $("<img />", {
            "src": e.target.result,
              "class": "thumb-image"
          }).appendTo(image_holder);
        }
 
        image_holder.show();
        reader.readAsDataURL($(this)[0].files[i]);
      }
 
    } else {
      alert("你的浏览器不支持FileReader！");
    }
  } else {
    alert("请选择图像文件。");
  }
});

Pour les étudiants qui ne sont pas familiers avec le téléchargement JavaScript, cet article peut être utilisé pour apprendre le téléchargement JavaScript ! !

Recommandations associées :

JavaScript utilise FileReader pour terminer l'introduction de la fonction de téléchargement et de prévisualisation des images

Native js FileReader Introduction détaillée de l'exemple de code objet

js pour lire des fichiers via l'interface du lecteur de fichiers

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!