Heim > Web-Frontend > H5-Tutorial > Hauptteil

HTML5-Code zur Implementierung des Drag-and-Drop-Batch-Uploads von Dateien

小云云
Freigeben: 2018-03-30 11:10:10
Original
3926 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich den HTML5-Code für das Drag-and-Drop-Batch-Upload mit. Diese Komponente ist auf Basis von Vue.js implementiert. Die vollständige Demo-Adresse finden Sie unter https://github .com/Msxiaoma/upload-folder. Ziehen Sie es per Drag-and-Drop hoch, um Ordner hochzuladen (wird nur von Chrome unterstützt).

1. Komponentenbeschreibung

  1. Mehrere Ordner gleichzeitig ziehen

  2. Den angegebenen Ordner löschen

  3. Zeigt den Upload-Fortschrittsbalken des aktuellen Ordners an

  4. Laden Sie einen Ordner hoch, der in Teilen größer als 5 MB ist

Der Effekt ist wie folgt:

2. Es sind Probleme aufgetreten

  1. Drag & Drop, um den Dateipfad unter jedem Ordner zu lesen

  2. So zeigen Sie den Fortschrittsbalken des aktuell hochgeladenen Ordners an

  3. Cookies beim Hochladen von Dateien domänenübergreifend übertragen

  4. Ordner Sharding

3. Lösungsprozess

1. Ziehen und ablegen, um den Dateipfad unter jedem Ordner zu lesen

Beim Durchführen von Drag-and-Drop-Vorgängen Das DataTransfer-Objekt wird zum Speichern von Daten verwendet, die durch Drag-and-Drop-Aktionen in den Browser gezogen werden. Es können ein oder mehrere Daten, ein oder mehrere Datentypen gespeichert werden

// 拖拽文件夹
dropFolders (e) {
  e.stopPropagation()
  e.preventDefault()
  var items = e.dataTransfer.items
  for (var i = 0; i < items.length; i++) {
    var item = items[i].webkitGetAsEntry()
    if (item) {
      this.checkFolders(item)
    }
  }
}

// 判断是否为文件夹
checkFolders (item) {
  if (item.isDirectory) {
    this.traverseFileTree(item)
  } else {
    this.$alert(&#39;只支持上传文件夹&#39;, &#39;提示&#39;, {
      confirmButtonText: &#39;确定&#39;
    })
  }
}

traverseFileTree (item, path, parentDir) {
  path = path || &#39;&#39;
  if (item.isFile) {
    item.file((file) => {
        let obj = {
          file: file,
          path: path + file.name,
          attr: item.attr
        }
        this.filesList.push(obj)
    })
  } else if (item.isDirectory) {
    var dirReader = item.createReader()
    dirReader.readEntries((entries) => {
      for (let i = 0; i < entries.length; i++) {
        entries[i].attr = item.attr
        this.traverseFileTree(entries[i], path + item.name + &#39;/&#39;, temp)
      }
    }, function (e) {
      console.log(e)
    })
  }
}
Nach dem Login kopieren

2. Fortschrittsbalken beim Hochladen von Ordnern

Dateien ohne Fragmente: Berechnen Sie entsprechend dem Ordner die Gesamtzahl der Dateien Der Prozentsatz jeder Datei im Ordner. Wenn eine Datei erfolgreich hochgeladen wurde, ändern Sie den Ordnerprozess.

Fragmentierte Dateien: Berechnen Sie nach der Berechnung des Prozentsatzes jeder Datei in der Datei den Prozentsatz der Datei in jedem Block Nachdem jede Datei erfolgreich hochgeladen wurde, ändern Sie den Prozess des Ordners.

3. Übertragen von Cookies über Domänen hinweg

Wenn der Server den Antwortheader festlegt

Access-Control-Allow-Origin: Sie müssen einen eindeutigen Domänennamen angeben, der mit der angeforderten Webseite übereinstimmt und nicht * sein darf. Access-Control-Allow-Credentials: true

Anforderungsheader festlegen:

withCredentials: true

Ergänzung:

Der Unterschied zwischen Teilzeichenfolge und Teilzeichenfolge

substr(start [, Länge]) gibt eine Teilzeichenfolge der angegebenen Länge beginnend an der angegebenen Position zurück.

Start: erforderlich. Die Startposition des gewünschten Teilstrings. Das erste Zeichen in der Zeichenfolge hat den Index 0.
Länge: optional. Die Anzahl der Zeichen, die in der zurückgegebenen Teilzeichenfolge enthalten sein sollen.

substring Gibt den Teilstring zurück, der sich an der angegebenen Position im String-Objekt befindet. Gibt einen String zurück, der den Teilstring vom Anfang bis zum Ende (ohne Ende) enthält.

start: Zeigt an die Startposition des Teilstrings und der Index beginnt bei 0.
Ende: Gibt die Endposition des Teilstrings an, der Index beginnt bei 0.

Das obige ist der detaillierte Inhalt vonHTML5-Code zur Implementierung des Drag-and-Drop-Batch-Uploads von Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage