HTML5-Methode zum Implementieren des Breakpoint-Fortsetzens des Hochladens von Dateien

Die FILE-API von HTML5 verfügt über eine Slice-Methode, die BLOB-Objekte teilen kann. Das Front-End ruft die entsprechende Datei über das FileList-Objekt ab, teilt die große Datei gemäß der angegebenen Teilungsmethode in Segmente auf und übergibt sie dann Stück für Stück an das Back-End, und das Back-End fügt die Dateien Stück für Stück der Reihe nach zusammen.

Prinzip der wiederaufnehmbaren Übertragung

Es gibt derzeit zwei häufig verwendete Methoden zur Wiederaufnahme der Übertragung: Eine besteht darin, Dateien über die WebSocket-Schnittstelle hochzuladen, und die andere ist Es ist durch Ajax. Obwohl WebSocket eher High-End klingt, sind andere Algorithmen im Grunde sehr ähnlich, und der Server muss hier die relativ praktische Ajax-Schnittstelle verwenden die Idee des Haltepunkt-Uploads.

Schließlich besteht der Kerninhalt des Lebenslauf-Uploads darin, die Datei zu „schneiden“ und sie dann Stück für Stück auf den Server zu übertragen. Allerdings birgt dieser scheinbar einfache Upload-Prozess unzählige Fallstricke.

Das erste ist die Dateiidentifizierung, wie Sie dem Server mitteilen können, wie viele Teile Sie geschnitten haben und wie der Server die von Ihnen hochgeladenen Dateien schließlich zusammenführen soll berücksichtigt werden.

Bevor mit dem Hochladen der Datei begonnen wird, müssen wir einen „Handshake“-Prozess mit dem Server durchführen, dem Server die Dateiinformationen mitteilen und dann mit dem Server die Größe der Slices vereinbaren Nach einem Konsens mit dem Server können wir mit der Übertragung der nachfolgenden Dateien beginnen.

Das Front-End muss jedes Dateistück an das Back-End übergeben. Nach Erfolg müssen sowohl das Front-End als auch das Back-End für nachfolgende Haltepunkte markiert werden.

Wenn die Dateiübertragung unterbrochen wird, kann der Benutzer die Datei erneut auswählen und anhand des Logos feststellen, ob ein Teil der Datei hochgeladen wurde. Wenn ja, können wir mit dem Hochladen der Datei entsprechend dem letzten fortfahren Fortschritt, um die Funktion zum Fortsetzen des Uploads zu erreichen.

Frontend-Slicing von Dateien

Mit der HTML5-Datei-API ist das Schneiden von Dateien viel einfacher als gedacht.

Verwenden Sie einfach die Slice-Methode

var packet = file.slice(start, end);

Der Parameter start ist die Position, an der das Slice beginnt, und end ist die Position, an der das Slice beginnt Slice-Enden sind Bytes. Durch die Steuerung von Start und Ende können Sie eine Dateisegmentierung

erreichen, wie zum Beispiel:

file.slice(0,1000); 
file.slice(1000,2000); 
file.slice(2000,3000); 
// ......

Hochladen von Dateifragmenten

Im vorherigen Teil haben wir die Datei mit der Slice-Methode in mehrere Teile aufgeteilt. Als nächstes müssen wir diese Fragmente auf den Server übertragen.

Hier verwenden wir die Ajax-Post-Anfrage zur Implementierung

var xhr = new XMLHttpRequest(); 
var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理 
xhr.open('POST', url, true); 
xhr.onload = function (e){ 
     // 判断文件是否上传成功，如果成功继续上传下一块，如果失败重试该快 
} 
xhr.upload.onprogress = function(e){ 
     // 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度 
     // e.loaded  该片文件上传了多少 
     // e.totalSize 该片文件的总共大小 
} 
xhr.send(packet);

Nachdem die Datei in den Hintergrund hochgeladen wurde, wird das Hintergrundprogramm wie PHP ausgeführt wird entsprechend reagieren.

Das Obige ist der Inhalt der HTML5-Methode zur Implementierung der Datei-Breakpoint-Wiederaufnahme. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).