Introduction à la fonction de JavaScript utilisant FileReader pour terminer le téléchargement et la prévisualisation des images

Cet article présente principalement JavaScript pour utiliser FileReader pour obtenir un effet de prévisualisation du téléchargement d'images en détail. Il a une certaine valeur de référence.

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, sauf 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 result. 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.

• L'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 peut prendre en charge les navigateurs Internet Explorer 10+, FireFox, Chrome et Opera.

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!