FileReader dans JS implémente l'aperçu du téléchargement d'images

Cette fois, je vais vous présenter l'aperçu du téléchargement d'images à l'aide de FileReader dans JS. Quelles sont les précautions pour implémenter l'aperçu du téléchargement d'images à l'aide de FileReader dans JS. Voici un cas pratique, jetons un coup d'œil.

JavaScriptDe nombreuses personnes ne savent pas comment utiliser FileReader pour obtenir un effet de prévisualisation du téléchargement d'images. La plupart des gens ne savent pas comment utiliser FileReader pour obtenir un effet de prévisualisation du téléchargement d'images. vous donnera les détails. Jetons un coup d'œil aux méthodes de fonctionnement et au code spécifiques.

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>

$("#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("请选择图像文件。");
  }
});

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment implémenter le modèle de décorateur dans node.js

Étapes détaillées pour utiliser plusieurs bases de données Django

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!