Implementierung und prinzipielle Einführung der JavaScript-Drag-and-Drop-Upload-Funktion

Dieser Artikel bietet Ihnen eine Einführung in die Implementierung und die Prinzipien der JavaScript-Drag-and-Drop-Upload-Funktion. Ich hoffe, dass er für Sie hilfreich ist.

Vor Kurzem stieß Xiao Ming auf eine solche Situation: Beim Hochladen von Dateien auf die Webseite stürzte die Seite gelegentlich ab. Xiao Ming testete diese Situation sorgfältig und stellte fest, dass eine Datei-Upload-Komponente, die er zuvor verwendet hatte, einige Mängel aufwies. Daher beschloss Xiao Ming, eine mit dem folgenden Stil handschriftlich zu schreiben:

Bild 1 ist der Stil, wenn keine Dateien hochgeladen werden, und Abbildung 2 ist der Stil nach dem Hochladen von Dateien. Der gestrichelte Teil ist der Platzierungsbereich. Schauen wir uns zuerst den Code an:

HTML-Teil

<div>
    <div>
      <div>
        <div>{{ fileName }}</div>
        <div>
          <span>将文件拖拽至此，或</span>
          <label>点此上传</label>
        </div>
      </div>
    </div>

    <div>
      <input>
      <label>选择文件</label>

      <button>提交</button>
    </div>
  </div>

CSS-Teil

    * {
      font-size: 14px;
    }
    .drag-area {
      height: 200px;
      width: 300px;
      border: dashed 1px gray;
      margin-bottom: 10px;
      color: #777;
    }
    .uploader-tips {
      text-align: center;
      height: 200px;
      line-height: 200px;
    }
    .file-name {
      text-align: center;
      height: 200px;
      line-height: 200px;
    }

js-Teil

    new Vue({
      el: '#app',
      data () {
        return {
          fileName: '',
          batchFile: '',
          MAX_FILE_SIZE: 10 * 1000 * 1000
        }
      },
      methods: {
        // 点击上传
        chooseUploadFile (e) {
          const file = e.target.files.item(0)

          if (!file) return
          if (file.size > this.MAX_FILE_SIZE) {
            return alert('文件大小不能超过10M')
          }

          this.batchFile = file
          this.fileName = file.name

          // 清空，防止上传后再上传没有反应
          e.target.value = ''
        },
        // 拖拽上传
        fileDragover (e) {
          e.preventDefault()
        },
        fileDrop (e) {
          e.preventDefault()
          const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象

          if (!file) return
          if (file.size > this.MAX_FILE_SIZE) {
            return alert('文件大小不能超过10M')
          }

          this.batchFile = file
          this.fileName = file.name
        },
        // 提交
        uploadOk () {
          if (this.batchFile === '') {
            return alert('请选择要上传的文件')
          }

          let data = new FormData()
          data.append('upfile', this.batchFile)

          // ajax
        }
      }
    })

Erklärung der Grundprinzipien

• Dragover- und Drop-Ereignisse

Kapitel Eine Sache, über die man sprechen sollte, sind diese beiden Ereignisse beim Drag & Drop, da diese beiden Ereignisse die Kernfunktion des Drag & Drop-Uploads unterstützen.
Für die Ziehaktion gibt es zwei Kernkonzepte, eines ist 拖拽元素 und das andere ist 放置目标. Hier werde ich nur auf die Ereignisse auf dem Drop-Ziel eingehen. Bitte überprüfen Sie die Ereignisse des Drag-Elements selbst.

Welche Ereignisse gibt es zum Platzieren von Zielen? Wie folgt:
Wenn ein Element auf ein gültiges Ablageziel gezogen wird (z. B. den gepunkteten Bereich im obigen Beispiel), treten nacheinander die folgenden Ereignisse auf:
(1) Dragenter
(2) Dragover
(3) Dragleave oder Drop
Solange ein Element zum Drop-Ziel gezogen wird, wird das Dragenter-Ereignis ausgelöst (ähnlich dem Mouseover-Ereignis). Das Dragover-Ereignis folgt sofort und wird weiterhin ausgelöst, während sich das gezogene Element innerhalb des Ablageziels bewegt. Wenn das Element aus dem Drop-Ziel herausgezogen wird, tritt das Dragover-Ereignis nicht mehr auf, aber das Dragleave-Ereignis wird ausgelöst (ähnlich dem Mouseout-Ereignis). Wenn das Element im Drop-Ziel abgelegt wird, wird das Drop-Ereignis anstelle des Dragleave-Ereignisses ausgelöst.

In diesem Beispiel müssen wir nur auf die Dragover- und Drop-Ereignisse achten. Aber das Drop-Ereignis ist etwas unanständig. Wenn Sie es anhören möchten, müssen Sie einige Verarbeitungsschritte durchführen, da Elemente standardmäßig nicht platziert werden dürfen spezieller Cursor (im Kreis befindet sich ein Backslash), der darauf hinweist, dass er nicht platziert werden kann. Wie folgt:

Wenn das gezogene Element ein Element passiert, das nicht platziert werden darf, tritt das Drop-Ereignis nicht ein, egal wie der Benutzer vorgeht. Was zu tun?
Wir können das Standardverhalten des Dragover-Ereignisses überschreiben, wie zum Beispiel e.preventDefault() im obigen Beispielcode.
Aufmerksame Schüler möchten vielleicht fragen: Es gibt auch e.preventDefault() im Drop-Ereignis. Kann es entfernt werden? Sie können es selbst ausprobieren.

• dataTransfer-Objekt

Dieses Objekt sieht vielleicht etwas seltsam aus, aber seine Rolle ist nicht gering. Wenn Sie beispielsweise ein Bild in den Zielbereich ziehen, wie erhält der Zielbereich die Informationen des Bildes? Verlassen Sie sich einfach darauf! Es handelt sich um eine Eigenschaft des Ereignisobjekts, mit der Daten im Zeichenfolgenformat vom gezogenen Element an das Ablageziel übergeben werden. In diesem Beispiel können wir es verwenden, um die Dateiinformationen abzurufen, die gezogen werden.

• Eingabeänderungsereignis

Dieses Ereignis ist tatsächlich knifflig. Es verfügt über eine solche Funktion, das heißt, das Hochladen derselben Datei ändert nichts Ereignis Das Änderungsereignis wird auch dann ausgelöst, wenn der Dateiinhalt geändert wurde.
Es ist beängstigend, darüber nachzudenken! Wenn der Benutzer beispielsweise ein Dokument hochladen möchte, es aber in den gepunkteten Bereich zieht, stellt er fest, dass der Dokumentinhalt geändert werden muss. Nachdem er die Änderung abgeschlossen hat, zieht er das Dokument und sendet es dann an den Server. Dann ist der Dokumentinhalt, den er auf den Server hochlädt, unverändert.
Wir benötigen also den Code e.target.value = '', um die Rücksetzverarbeitung durchzuführen, damit das Änderungsereignis jedes Mal ausgelöst wird, wenn eine Datei hochgeladen wird.

Das obige ist der detaillierte Inhalt vonImplementierung und prinzipielle Einführung der JavaScript-Drag-and-Drop-Upload-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!