Beispielcode für den HTML5-Drag-and-Drop-Batch-Upload von Dateien

Diese Komponente ist auf Basis von Vue.js implementiert. Die vollständige Demo-Adresse finden Sie unter https://github.com/Msxiaoma/upload-folder (wird nur von Chrome unterstützt).

1. Ziehen Sie mehrere Ordner gleichzeitig per Drag & Drop
2. Angegebenen Ordner löschen
3. Zeigt den Upload-Fortschrittsbalken des aktuellen Ordners an
4. Laden Sie Ordner hoch, die teilweise größer als 5 Mio. sind

Der Effekt ist wie folgt:

1. Ziehen Sie per Drag-and-Drop den Dateipfad unter jedem Ordner, um ihn zu lesen
2. So zeigen Sie den Fortschrittsbalken des aktuell hochgeladenen Ordners an
3. Beim Hochladen von Dateien werden Cookies domänenübergreifend übertragen
4. Ordnerfragmentierung

Beim Durchführen eines Drag-and-Drop-Vorgangs wird das DataTransfer-Objekt zum Speichern der Daten verwendet, die durch die Drag-and-Drop-Aktion in den Browser gezogen werden. Es kann eine oder mehrere Daten, einen oder mehrere Datentypen speichern

 // Ordner ziehen 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) } }}// Bestimmen Sie, ob es sich um einen Ordner handelt checkFolders (item) { if (item.isDirectory) { this.traverseFileTree(item) } else { this.$alert('Unterstützt nur das Hochladen von Ordnern', 'Prompt', { bestätigenButtonText: 'OK' }) }}traverseFileTree (item, path, parentDir ) { path = path ||. '' 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 < Einträge.Länge; i++) { Einträge[i].attr = item.attr this.traverseFileTree(entries[i], Pfad + Elementname + '/', temp) } }, Funktion (e) { console.log(e) }) }}

Dateien ohne Fragmentierung: Berechnen Sie anhand der Gesamtzahl der Dateien im Ordner den Prozentsatz jeder Datei im Ordner. Wenn eine Datei erfolgreich hochgeladen wurde, ändern Sie den Ordnerprozess.

Fragmentierte Dateien: Nachdem Sie den Prozentsatz jeder Datei in der Datei berechnet haben, berechnen Sie den Prozentsatz jeder Datei in der Datei. Nachdem jede Datei erfolgreich hochgeladen wurde, ändern Sie den Prozess des Ordners.

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: wahr

Anforderungsheader festlegen:

withCredentials:true

Auffüllen:

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

start: erforderliche Option. 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.

Teilzeichenfolge gibt die Teilzeichenfolge zurück, die sich an der angegebenen Position im String-Objekt befindet. Gibt eine Zeichenfolge zurück, die die Teilzeichenfolge vom Anfang bis zum Ende (ohne Ende) enthält.

Start: Gibt die Startposition der Teilzeichenfolge an und der Index beginnt bei 0.

Ende: Gibt die Endposition des Teilstrings an, der Index beginnt bei 0.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.