HTML5-Breakpoint-Resume-Implementierungsmethode für große Dateien_HTML5-Tutorial-Fähigkeiten

Chunking großer Dateien

Im Allgemeinen haben häufig verwendete Webserver Größenbeschränkungen für die Übermittlung von Daten an den Server. Bei Dateien, die eine bestimmte Größe überschreiten, gibt der Server eine Ablehnungsmeldung zurück. Natürlich stellen Webserver Konfigurationsdateien bereit, die die Größenbeschränkung ändern können. Es gibt auch einige Möglichkeiten, große Dateien auf IIS hochzuladen, indem Sie den Webserver so ändern, dass die Dateigröße begrenzt wird. Dies stellt jedoch Probleme für die Sicherheit des Webservers dar. Ein Angreifer kann leicht ein großes Datenpaket senden und Ihren Webserver direkt zerstören.
Die aktuelle gängige Implementierungsmethode zum Hochladen großer Dateien besteht darin, große Dateien in Blöcke aufzuteilen. Teilen Sie beispielsweise eine 100-MB-Datei entsprechend 2 MB in 50 Blöcke auf. Laden Sie dann nacheinander jede Datei auf den Server hoch und führen Sie die Dateien nach Abschluss des Uploads auf dem Server zusammen.
Um das Hochladen großer Dateien im Web zu implementieren, implementiert der Kern hauptsächlich die Dateisegmentierung. Bevor die HTML5-Datei-API erschien, war es notwendig, die Dateiübertragung in Blöcken im Web zu implementieren. Datei-Chunking kann nur über Flash oder Activex erreicht werden.

Unter HTML5 können wir die Dateisegmentierung direkt über die Slice-Methode der Datei implementieren. Zum Beispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. file.slice(0,1000);
2. file.slice(1000,2000);
3. file.slice(2000,3000);

Anschließend wird es asynchron über XMLHttpRequest auf den Server hochgeladen.

HTML5-Upload-Dateiklassenbibliothek

Wenn Sie interessiert sind und Zeit haben, können Sie natürlich die Datei-API von HTML5 verwenden, um es selbst zu implementieren. Ich habe im Internet die folgenden zwei Bibliotheken gefunden, die HTML5 unterstützen.
resumable.js Im Anhang finden Sie die Adresse auf Git: https://github.com/23/resumable.js
Pludload http://plupload.com/

resumable ist ein reiner HTML5-Upload Klassenbibliothek.
Pludload unterstützt HTML5, Flash, Silverlight und HTML4. Es ermittelt automatisch, ob der Browser HTML5 unterstützt und andere Upload-Methoden verwendet.
Ich habe es getestet und festgestellt, dass sowohl resumable als auch Pludload das Hochladen von HTML5-Dateien in Blöcken unterstützen. Nachdem ich es verwendet habe, bin ich der Meinung, dass Resumable besser geeignet ist, daher werde ich unten Resumable für die Einführung auswählen.

Einführung in die Verwendung des resumable.js-Breakpoint-Uploads

Einführung in die Hauptkonfiguration:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var r = neu Fortsetzbar({
2. Ziel:'/test/upload',
3. chunkSize:1*1024*1024,
4. Gleichzeitige Uploads:4,
5. testChunks: true,
6. ThrottleProgressCallbacks:1,
7. Methode: "Oktett"
8. });

chunkSize Chunk-Dateigröße, in Bytes
simultaneousUploads Die Anzahl der Prozesse, die gleichzeitig Dateiblöcke hochladen, sodass mehrere Dateiblöcke gleichzeitig hochgeladen werden können.
testChunks prüft, ob der vorherige Dateiblock zuerst Dateiinformationen über die get-Methode senden soll, um zu erkennen, ob die Datei hochgeladen wurde.

Fortsetzbarer Haltepunkt-Upload wird über den testChunks-Konfigurationsknoten implementiert, wenn er auf „true“ gesetzt ist. resumable sendet zunächst eine Get-Anfrage, wenn der http-Status 200 zurückgibt. Es wird davon ausgegangen, dass der aktuelle Block hochgeladen wurde, und dann wird eine Abrufanforderung für den nächsten Block gestellt. Wenn der zurückgegebene HTTP-Status nicht 200 ist, wird das aktuelle Blockdatenpaket über den Post-Modus zum Dateiblock-Upload gesendet.

Wenn testChunks auf „true“ gesetzt wird, wird für jeden Upload eine Get-Anfrage hinzugefügt, wenn wir die Anzahl der Chunks in der Datei bereits vor dem letzten unterbrochenen Upload kennen. Laden Sie das nächste Mal einfach direkt von der unterbrochenen Blocknummer hoch. Dadurch wird eine HTTP-Get-Anfrage für jeden Block reduziert.
Als Reaktion auf diese Anforderung habe ich den Quellcode von resumable geändert und dem Dateiobjekt in resumable ein startchunkindex-Attribut hinzugefügt, das standardmäßig 0 ist. Wird verwendet, um den Block festzulegen, aus dem die aktuelle Datei hochgeladen werden soll. Auf diese Weise müssen wir vor dem Hochladen der Datei nur eine Abfrage vom Server durchführen (abfragen, in welchen Block die aktuelle Datei hochgeladen wird) und den zuletzt hochgeladenen Dateiblockindex zurückgeben. Setzen Sie dann den Indexwert auf das startchunkindex-Attribut der Datei, um den Upload ab dem letzten getrennten Dateiblock zu starten.
Aufrufmethode:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. //Ereignis zum Hinzufügen einer Datei verarbeiten
2. r.on('fileAdded', function (file) {
3.                                                                                                                                                                                                                             . Einzelheiten finden Sie in der Demo im Anhang.
Abschlussarbeiten

Nachdem alle Dateiblöcke hochgeladen wurden, besteht die letzte Arbeit darin, die Dateien zusammenzuführen und zu speichern. Der Anhang ist ein Serverbeispiel für eine fortsetzbare upload.net-Implementierung, einschließlich einer einfachen Funktion zum Zusammenführen von Dateien. Sie können auch Demos in anderen Sprachen von resumable's git herunterladen.
Der Einfachheit halber speichert das Demo-Beispiel die Dateien nur auf dem lokalen Rechner. In einer realen Produktionsumgebung. Im Allgemeinen sollte es auf einem separaten Dateiserver abgelegt werden (das Front-End-Web wird über FTP oder Ordnerfreigabe auf den Dateiserver hochgeladen), und dann sollten die hochgeladenen Dateien verteilt, gespiegelt oder verarbeitet werden (z. B. Videokomprimierung). Natürlich ist es am besten, es in einem verteilten Dateisystem zu speichern. Derzeit scheint es eine gute Lösung zu sein, es im Hadoop Distributed File System (HDFS) zu speichern.
Demo


Vs2012 Html5 Demo-Download hochladen