Aperçu de l'image de téléchargement par glisser-déposer JS HTML5

1. API de fichier : (API de fichier)

Chaque fichier sélectionné par le contrôle de formulaire de type de fichier est un objet fichier et l'objet FileList est une liste de collections de ces objets fichier, représentant tous les fichiers sélectionnés. L'objet fichier hérite de l'objet Blob, qui représente les données brutes binaires et fournit la méthode slice pour accéder au bloc de données brutes à l'intérieur des octets. En bref, l'objet fichier contient l'objet FlieList, et l'objet fichier hérite de l'objet Blob !

Relations d'attributs pertinentes de chaque objet :

Interface FileReader :
Comme le montre la figure : HTML5 fournit également l'interface FileReader : utilisée pour lire des fichiers en mémoire et lire des données dans le fichier.

var lecteur=nouveau FileReader();

Cette interface comporte un total de quatre méthodes et six événements :
•readAsBinaryString(file) : lit le fichier en binaire
•readAsDataURL(file) : lire le fichier DataURL
•readAsText(file,[encoding]) : lit le fichier sous forme de texte
•about(aucun) : interrompre la lecture du fichier
-------------------------------------------------- -----------------------------------
•onabort : déclenché lorsque la lecture d'un fichier est interrompue
•onerror : Déclenché lorsqu'une erreur se produit lors de la lecture du fichier
•onloadstart : Déclenché au démarrage de la lecture du fichier
•onprogress : toujours déclenché lors de la lecture d'un fichier
•onload : déclenché lorsque le fichier est lu avec succès
•onloadend : déclenché à la fin de la lecture du fichier (déclenché à la fois en cas de succès et d'échec)
Le paramètre d'événement ci-dessus e a e.target.result ou this.result pointant vers le résultat lu !

2. Glissez-déposez l'API :

Attributs glisser-déposer : définissez l'attribut glissable de l'élément qui doit être glissé-déposé sur true (dragable="true") ! L'élément img et un élément peuvent être glissés et déposés par défaut.

Événements glisser-déposer : (divisés en événements d'élément glisser-déposer et événements d'élément cible)

Événement d'élément glisser-déposer :
•dragstart : déclenché avant de faire glisser
•glisser, déclenché en continu entre l'avant et la fin du déplacement
•dragend, déclenché à la fin du glissement
Événement d'élément cible :
•dragenter, déclenché lors de la saisie de l'élément cible
•dragover, déclenché en continu entre l'entrée et la sortie de la cible
•glisser, déclenché en quittant l'élément cible
•drop, déclenché en relâchant la souris sur l'élément cible
mais! Il est à noter que le comportement par défaut (refuser d'être glissé-déposé) doit être empêché dans les événements de glisser-déposer de l'élément cible, sinon le glisser-déposer ne peut pas être implémenté !

-------------------------------------------------- ----------------------------------

Objet DataTransfer : spécifiquement utilisé pour stocker les données à transporter lors du glisser-déposer, et peut être défini comme attribut dataTransfer de l'événement glisser-déposer.

3 attributs :
•effectAllowed : définir le style du curseur (aucun, copie, copyLink, copyMove, link, linkMove, move, all et non initialisé)
•effectAllowed : définissez l'effet visuel de l'opération glisser-déposer
•Types : Type de données stockées, pseudo-tableau de chaînes
•files : récupère les fichiers déplacés externes et renvoie une liste de fichiers. Il y a un attribut de type sous filesList pour renvoyer le type de fichier
. 4 méthodes :
•setData() : Définir la clé et la valeur des données (doivent être des chaînes)
•getData() : récupère les données et obtient la valeur correspondante
en fonction de la valeur clé •clearData() : Effacer les données stockées dans l'objet DataTransfer
•setDragImage(imageUrl,log x,long y) : utilisez l'élément img pour définir l'icône glisser-déposer

//Exemple :
target.addEventListener('dragstart',function(e){
var fs = e.dataTransfer.files;//Obtenir la liste d'objets de fichier par glisser-déposer Objet FlieList
var dt=e.dataTransfer;//attribut dataTransfer comme événement glisser-déposer
dt.effectAllowed='copie';
dt.setData('text/plain','hello');
dt.setDragImage(dragIcom,-10,-10);
});

3. Faites glisser et déposez pour télécharger l'aperçu de l'image :

Idée :
1. Familiarisez-vous avec les quatre événements des éléments cibles du glisser-déposer de fichiers Remarque : le comportement par défaut est bloqué dans les événements ondragover et ondrop
. 2. Après avoir glissé et placé, la collection d'objets fichier est obtenue : e.dataTransfer.files
3. Parcourez chaque objet fichier de la collection, déterminez le type et la taille du fichier et effectuez les opérations correspondantes si le type est spécifié
4. Lisez l'objet d'informations sur le fichier : new FileReader(), qui a des méthodes telles que la lecture de l'objet fichier DataUrl : readAsDataURL (objet fichier), les événements déclenchés après une lecture réussie : événement onload, etc., this.result est les données lues
5. Effectuez le traitement logique correspondant sur plusieurs événements dans l'objet FileReader

HTML :

<div class="container">
  <p class="text">请将图片文件拖拽至此区域！</p>
</div>

Charges totales : 100

JQ :

<script type="text/javascript">
    $(function() {
      /*思路：
       *1.熟悉文件拖拽 目标元素 的四个事件,注意:ondragover、ondrop事件中阻止默认行为
       *2.拖拽放置后，获取到文件对象集合：e.dataTransfer.files
       *3.循环该集合中的每个文件对象，判断文件类型以及文件大小，是指定类型则进行相应的操作
       *4.读取文件信息对象：new FileReader()，它有读取文件对象为DataUrl等方法：readAsDataURL(文件对象)、读取成功之后触发的事件：onload事件等，this.result为读取到的数据
       *5.在FileReader对象中的几个事件中进行相应的逻辑处理
       *
       */
 
      //必须将jq对象转换为js对象，调用原生方法
      var oDiv = $(".container").get(0);
      var oP = $(".text");
      //进入
      oDiv.ondragenter = function() {
          oP.html('');
        }
        //移动，需要阻止默认行为，否则直接在本页面中显示文件
      oDiv.ondragover = function(e) {
 
          e.preventDefault();
        }
        //离开
      oDiv.onleave = function() {
          oP.html('请将图片文件拖拽至此区域！');
        }
        //拖拽放置，也需要阻止默认行为
      oDiv.ondrop = function(e) {
 
        e.preventDefault();
        //获取拖拽过来的对象,文件对象集合
        var fs = e.dataTransfer.files;
        //若为表单域中的file标签选中的文件，则使用form[表单name].files[0]来获取文件对象集合
        //打印长度
        console.log(fs.length);
        //循环多文件拖拽上传
        for (var i = 0; i < fs.length; i++) {
          //文件类型
          var _type = fs[i].type;
 
          console.log(_type);
          //判断文件类型
          if (_type.indexOf('image') != -1) {
            //文件大小控制
            console.log(fs[i].size);
            //读取文件对象
            var reader = new FileReader();
            //读为DataUrl,无返回值
            reader.readAsDataURL(fs[i]);
            reader.onloadstart = function(e) {
                //开始加载
              }
              // 这个事件在读取进行中定时触发
            reader.onprogress = function(e) {
 
              $("#total").html(e.total);
            }
 
            //当读取成功时触发，this.result为读取的文件数据
            reader.onload = function() {
                //文件数据
                // console.log(this.result);
                //添加文件预览
                var oImg = $("<img style='width:100px;' src='' />");
                oImg.attr("src", this.result);
                $(oDiv).append(oImg); //oDiv转换为js对象调用方法
              }
              //无论成功与否都会触发
            reader.onloadend = function() {
              if (reader.error) {
                console.log(reader.error);
              } else {
                //上传没有错误，ajax发送文件，上传二进制文件
              }
            }
          } else {
            alert('请上传图片文件！');
          }
        }
 
      }
    });
  </script>

Rendu :

Résumé : Combiné à la connaissance de l'API d'événement glisser-déposer, de l'objet DataTransfer et de l'objet de lecture de fichiers FileList, un simple effet de prévisualisation d'image de téléchargement par glisser-déposer est obtenu. Vous devez être familier avec la relation et l'utilisation de chaque objet, et avoir une idée claire de mise en œuvre !

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. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés à l'aperçu de l'image de téléchargement par glisser-déposer JS HTML5, veuillez faire attention au site Web PHP chinois !