JS HTML5-Bildvorschau per Drag & Drop hochladen

1. Datei-API: (Datei-API)

Jede von der Dateityp-Formularsteuerung ausgewählte Datei ist ein Dateiobjekt, und das FileList-Objekt ist eine Sammlungsliste dieser Dateiobjekte, die alle ausgewählten Dateien darstellt. Das Dateiobjekt erbt vom Blob-Objekt, das binäre Rohdaten darstellt und die Slice-Methode für den Zugriff auf den Rohdatenblock innerhalb der Bytes bereitstellt. Kurz gesagt, das Dateiobjekt enthält das FlieList-Objekt und das Dateiobjekt erbt vom Blob-Objekt!

Relevante Attributbeziehungen jedes Objekts:

FileReader-Schnittstelle:
Wie aus der Abbildung ersichtlich ist, bietet HTML5 auch die FileReader-Schnittstelle: Wird zum Einlesen von Dateien in den Speicher und zum Lesen von Daten in der Datei verwendet.

var reader=new FileReader();

Diese Schnittstelle verfügt über insgesamt vier Methoden und sechs Ereignisse:
•readAsBinaryString(file): Liest die Datei als Binärdatei
•readAsDataURL(file): Datei-DataURL lesen
•readAsText(file,[encoding]): Liest die Datei als Text
•about(none): Dateilesen unterbrechen
-------------------------------------------------- ----------------------------------
•onabort: wird ausgelöst, wenn das Lesen einer Datei unterbrochen wird
•onerror: Wird ausgelöst, wenn beim Lesen der Datei ein Fehler auftritt
•onloadstart: Wird ausgelöst, wenn das Lesen der Datei beginnt
•onprogress: Wird immer beim Lesen einer Datei
ausgelöst •onload: Wird ausgelöst, wenn die Datei erfolgreich gelesen wurde
•onloadend: Wird ausgelöst, wenn das Lesen der Datei endet (wird sowohl bei Erfolg als auch bei Misserfolg ausgelöst)
Der obige Ereignisparameter e hat e.target.result oder this.result, die auf das Leseergebnis zeigen!

2. Drag-and-Drop-API:

Drag-and-Drop-Attribute: Setzen Sie das Drag-and-Drop-Attribut des Elements, das per Drag-and-Drop gezogen werden muss, auf true (dragable="true"). Das img-Element und ein Element können standardmäßig per Drag-and-Drop verschoben werden.

Drag-and-Drop-Ereignisse: (unterteilt in Drag-and-Drop-Elementereignisse und Zielelementereignisse)

Elementereignis per Drag & Drop:
•dragstart: Wird vor dem Ziehen
ausgelöst •Ziehen, kontinuierlich ausgelöst zwischen vor dem Ziehen und dem Ende des Ziehens
•dragend, wird ausgelöst, wenn das Ziehen endet
Zielelementereignis:
•dragenter, ausgelöst beim Betreten des Zielelements
•Dragover, wird kontinuierlich zwischen dem Betreten und dem Verlassen des Ziels ausgelöst
•dragleave, ausgelöst beim Verlassen des Zielelements
•Drop, ausgelöst durch Loslassen der Maus auf dem Zielelement
Aber! Es ist zu beachten, dass das Standardverhalten (Drag & Drop verweigern) in den Drag & Drop-Ereignissen des Zielelements verhindert werden muss, da Drag & Drop sonst nicht implementiert werden kann!

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

DataTransfer-Objekt: Wird speziell zum Speichern von Daten verwendet, die beim Ziehen und Ablegen übertragen werden sollen, und kann als dataTransfer-Attribut des Drag-and-Drop-Ereignisses festgelegt werden.

3 Attribute:
•effectAllowed: Cursorstil festlegen (none, copy, copyLink, copyMove, link, linkMove, move, all und uninitialized)
•effectAllowed: Legen Sie den visuellen Effekt des Drag-and-Drop-Vorgangs fest
•Typen: Typ der gespeicherten Daten, Pseudo-Array von Zeichenfolgen
•Dateien: Externe gezogene Dateien abrufen und eine Dateiliste zurückgeben. Unter „DateienListe“ gibt es ein Typattribut, um den Dateityp
zurückzugeben 4 Methoden:
•setData(): Datenschlüssel und -wert festlegen (muss Zeichenfolgen sein)
•getData(): Daten abrufen und den entsprechenden Wert
entsprechend dem Schlüsselwert abrufen •clearData(): Löscht die im DataTransfer-Objekt gespeicherten Daten
•setDragImage(imageUrl,log x,long y): Verwenden Sie das img-Element, um das Drag-and-Drop-Symbol
festzulegen
//Beispiel:
target.addEventListener('dragstart',function(e){
var fs = e.dataTransfer.files;// Holen Sie sich das FlieList-Objekt der Drag-and-Drop-Dateiobjektliste
var dt=e.dataTransfer;//dataTransfer-Attribut als Drag-and-Drop-Ereignis
dt.effectAllowed='copy';
dt.setData('text/plain','hello');
dt.setDragImage(dragIcom,-10,-10);
});

3. Ziehen Sie die Bildvorschau per Drag & Drop hoch:

Idee:
1. Machen Sie sich mit den vier Ereignissen von Datei-Drag-and-Drop-Zielelementen vertraut. Hinweis: Das Standardverhalten ist bei Ondragover- und Ondrop-Ereignissen
blockiert 2. Nach dem Ziehen und Platzieren wird die Dateiobjektsammlung erhalten: e.dataTransfer.files
3. Durchlaufen Sie jedes Dateiobjekt in der Sammlung, bestimmen Sie den Dateityp und die Dateigröße und führen Sie entsprechende Vorgänge aus, wenn der Typ angegeben ist
4. Lesen Sie das Dateiinformationsobjekt: new FileReader (), das über Methoden wie das Lesen des Dateiobjekts als DataUrl verfügt: readAsDataURL (Dateiobjekt), Ereignisse, die nach erfolgreichem Lesen ausgelöst werden: Onload-Ereignis usw., this.result sind die gelesenen Daten
5. Führen Sie die entsprechende logische Verarbeitung in mehreren Ereignissen im FileReader-Objekt durch

HTML:

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

Gesamtlasten: 46b0439886e39c67db0847046448244610054bdf357c58b8a65c66d7c19c8e4d114

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>

Darstellung:

Zusammenfassung: In Kombination mit den Kenntnissen der Drag-and-Drop-Ereignis-API, des DataTransfer-Objekts und des Dateileseobjekts FileList wird ein einfacher Drag-and-Drop-Upload-Bildvorschaueffekt erzielt. Sie müssen mit der Beziehung und Verwendung jedes Objekts vertraut sein und eine klare Implementierungsidee haben!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Weitere Artikel zur Drag-and-Drop-Upload-Bildvorschau von JS HTML5 finden Sie auf der chinesischen PHP-Website!