So implementieren Sie das Hochladen von Datei-Haltepunkten für Lebensläufe in H5

Dieses Mal zeige ich Ihnen, wie Sie die Übertragung von Dateien mit Haltepunkten in H5 fortsetzen und welche Vorsichtsmaßnahmen es gibt, um die Übertragung von Datei-Haltepunkten in H5 fortzusetzen Schauen Sie es sich gemeinsam an.

Die FILE-API von HTML5 verfügt über eine Slice-Methode, die BLOBObjekte aufteilen 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 fortsetzbaren Übertragung

Es gibt derzeit zwei häufig verwendete Methoden zur Wiederaufnahme der Übertragung, eine davon ist die Websocket-Schnittstelle Datei-Upload , die andere ist über Ajax. Obwohl WebSocket mit Ausnahme der Verwendung unterschiedlicher Protokolle hochwertiger klingt, sind die anderen Algorithmen im Grunde sehr ähnlich und die WS-Schnittstelle muss aktiviert sein Der relativ praktische Ajax wird hier verwendet, 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.

Front-End-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); 
// ......

Hochladen von Dateifragmenten

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

Hier verwenden wir die Post-Anfrage von Ajax, um

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);

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel!

Empfohlene Lektüre:

Detaillierte Erläuterung der Speichermethode von H5,

Wie man die Einschränkungsüberprüfungs-API verwendet H5

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Hochladen von Datei-Haltepunkten für Lebensläufe in H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!