Maison > interface Web > js tutoriel > le corps du texte

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

韦小宝
Libérer: 2018-01-25 11:02:08
original
1612 Les gens l'ont consulté

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>
Copier après la connexion


FileReader Peut prendre en charge les navigateurs Internet Explorer 10+, FireFox, Chrome et Opera.
$("#fileUpload").on(&#39;change&#39;, function () {
 
  //获取上传文件的数量
  var countFiles = $(this)[0].files.length;
 
  var imgPath = $(this)[0].value;
  var extn = imgPath.substring(imgPath.lastIndexOf(&#39;.&#39;) + 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("请选择图像文件。");
  }
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal