Detaillierte Einführung in die HTML5-Datei-API zur Implementierung der Haltepunktwiederaufnahme

Derzeit erfordern die meisten Websites auf dem Markt die Installation von Browser-Plug-ins für den Haltepunkt-Upload. Dieser Artikel richtet sich an fortgeschrittene Browserumgebungen über HTML5 Datei API Haltepunkt-Upload zur Erläuterung implementieren

HTML5s hat das Attribut „multiple“ hinzugefügt, das mehrere Werte akzeptieren kann

Feld

Mit diesem hinzugefügten Attribut können Benutzer im Popup-Dialogfeld mehrere Dateien gleichzeitig auswählen

<input type="file" multiple="multiple" name="file" id="file">

2. Implementieren Sie den Datei-Upload von der Funktion zum Ziehen des Computers zur Webseite und Hinzufügen der Dateiwarteschlange

Hier verwenden wir Dragover- und Drop-Ereignisse, um die Datei-Drag-Funktion zu verwalten

Der Dragover wird hier zum Verschieben beim Verschieben auf das angegebene Element verwendet Wir binden die Dragover-Zeit an den Körper, um das Ereignis des Ziehens der Datei auf der Seite zu verarbeiten.

Verwenden Sie das Drop-Ereignis, um das Ereignis zu verarbeiten, wenn die Maus losgelassen wird. Zu diesem Zeitpunkt sollte es sein Die Dateien werden zur weiteren Verarbeitung in die Upload-Warteschlange hinzugefügt Das Hochladen von Dateien über die WebSocket-Schnittstelle und die andere über Ajax haben ihre eigenen Vor- und Nachteile. Abgesehen von der Verwendung unterschiedlicher Protokolle sind andere Algorithmen grundsätzlich sehr ähnlich Um die WS-Schnittstelle zu aktivieren, wird das relativ praktische Ajax verwendet, um die Idee des Haltepunkt-Uploads zu veranschaulichen.

document.body.addEventListener('dragover', dragFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 evt.dataTransfer.dropEffect = 'copy';
}

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.

document.body.addEventListener('drop', dropFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 // dataTransfer.files属性可以获取到所有拖动选择的文件，通过遍历可以读取到所有文件的信息。
 // 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息
 var files = evt.dataTransfer.files;
 // addfile 方法 用来添加上传文件队列，在input的change事件中也需要调用
 // 该方法首先检查有无文件正在上传中，如果有就将后续加入的文件放到上传队列中，如果没有文件正在上传就直接执行上传命令
 addfile(files);
}

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.

4. Front-End-Slice 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

  
  wie

erreichen. 5. Hochladen von Dateifragmenten

Im vorherigen Teil haben wir dazu die Slice-Methode verwendet Dateien hochladen In mehrere Teile unterteilt, müssen diese Fragmente als Nächstes auf den Server übertragen werden.

Hier verwenden wir die

Post-Anfrage

von Ajax, um

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

zu implementieren

textpop-up

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

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die HTML5-Datei-API zur Implementierung der Haltepunktwiederaufnahme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!