Was ist das Prinzip der Lebenslaufübertragung? So verwenden Sie HTML5, um einen Haltepunkt zum Fortsetzen des Hochladens von Dateien zu erreichen

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 davon ist das Datei-UploadSchnittstelle 🎜> Die andere Möglichkeit besteht darin, Ajax zu verwenden. Obwohl WebSocket hochwertiger klingt, sind andere Algorithmen im Grunde sehr ähnlich und der Server muss die WS-Schnittstelle öffnen um die Idee des Haltepunkt-Uploads zu veranschaulichen.

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 weiterer Dateien beginnen.

Das Front-End muss jedes Dateistück an das Back-End übergeben. Nach Erfolg müssen das Front-End und 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 endet. Die Einheiten sind alle 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); 
// ......

Dateifragmente hochladen

Im vorherigen Teil haben wir die Slice-Methode zum Teilen verwendet Nachdem einige Teile der Datei erhalten wurden, müssen diese Fragmente als Nächstes auf den Server übertragen werden.

Hier verwenden wir eine 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 sie vom Hintergrundprogramm wie PHP entsprechend behandelt.

Das obige ist der detaillierte Inhalt vonWas ist das Prinzip der Lebenslaufübertragung? So verwenden Sie HTML5, um einen Haltepunkt zum Fortsetzen des Hochladens von Dateien zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!