Was macht eigentlich die HTML5 File.slice Methode?

Lesezeit: 3 Minuten

Benutzer-Avatar
Ponml

Ich arbeite mit einer benutzerdefinierten API, um einem Benutzer das Hochladen einer Datei (von hoffentlich beliebiger Größe) zu ermöglichen. Wenn die Datei zu groß ist, wird sie aufgeteilt und in mehreren Anfragen an den Server verarbeitet.

Ich schreibe Code, der verwendet File und FileReader (HTML5) nach vielen Beispielen aus dem Internet. Im Allgemeinen (nach dem, was ich online gelesen habe) erhalten die Leute bei einer Chunkfied-Dateiübertragung zuerst einen Datenklumpen von ihrem Dateiobjekt

var file = $('input[type=file]')[0].files[0];
var blob = file.slice(start,end)

Verwenden Sie dann a FileReader um den Klecks zu lesen readAsArrayBuffer(blob) oder readAsBinaryString(blob)

Und endlich rein FileReader.onload(e) Methode, senden Sie die Daten an den Server. Wiederholen Sie diesen Vorgang für alle Chunks in der Datei.

Meine Fragen sind

Warum muss ich eine verwenden FileReader? Wenn ich es nicht benutze, schicke einfach Blobs mit File.slice, gibt es eine Garantie dafür, dass der Slicing-Vorgang durchgeführt wird, bevor ich versuche, die Daten in jeder Anfrage zu senden. Tut das File Objekt lädt die gesamte Datei, wenn es erstellt wird (sicherlich nicht?). Tut File.slice suchen Sie die von den Parametern vorgegebene Position und lesen Sie dann die Informationen ein? Die Dokumentation gibt mir keine Hinweise darauf, wie es implementiert ist.

Benutzer-Avatar
Clayton Gulick

Es ist wichtig zu beachten, dass File von Blob erbt, File nicht wirklich über eine Slice-Methode verfügt, sondern diese Methode von Blob erhält. File fügt nur ein paar Metadatenattribute hinzu.

Die beste Art, sich ein Blob (oder eine Datei) vorzustellen, ist ein Zeiger auf Daten, aber nicht die eigentlichen Daten selbst. So ähnlich wie ein Dateihandle in anderen Sprachen.

Sie können nicht auf die Daten in einem Blob zugreifen, ohne einen Reader zu verwenden, der asynchron liest, um das Blockieren des UI-Threads zu vermeiden.

Die Blob-slice()-Methode gibt nur ein weiteres Blob zurück, aber auch hier handelt es sich nicht um Daten, sondern nur um einen Zeiger auf einen Datenbereich innerhalb des ursprünglichen Blobs, ähnlich wie ein begrenzter Zeiger auf eine Ansicht. Um die Bytes tatsächlich aus dem geschnittenen Blob herauszuholen, müssen Sie immer noch einen Reader verwenden. Im Fall eines geschnittenen Blobs ist Ihr Lesegerät begrenzt.

Dies ist wirklich nur als Bequemlichkeit gedacht, damit Sie nicht einen Haufen relativer und absoluter Offsets in Ihrem Code herumtragen müssen, sondern nur eine begrenzte Ansicht der Daten erhalten und den Reader so verwenden können, als ob Sie von Byte lesen würden 0.

Im Fall von XMLHttpRequest (vorausgesetzt, der Browser unterstützt die neuere Schnittstelle) werden die Daten beim Senden gestreamt und durch die Grenzen des Blobs eingeschränkt. Grundsätzlich funktioniert es genauso, wie Sie es sich vorstellen würden, wenn Sie einen Dateizeiger an eine Stream-Methode senden (was im Grunde genommen unter der Decke vor sich geht). https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#Sending_binary_data

Im Wesentlichen ist es ein fauler Leser. Wenn das Blob bereits aus dem Dateisystem geladen/gelesen oder im Arbeitsspeicher erstellt wurde, wird es einfach verwendet. Wenn Sie jedoch eine Datei verwenden, wird sie träge geladen und asynchron aus dem Hauptthread gestreamt.

Die grundlegende Logik hier ist, dass die Browser-Entwickler niemals wollen, dass ein Lesevorgang synchron erfolgt, da dies den Haupt-Thread blockieren könnte, sodass alle APIs um diese Kernphilosophie herum entwickelt wurden. Beachten Sie, dass Blob.slice() synchron ist – so wissen Sie, dass es eigentlich keine E/A ausführt, sondern nur Grenzen und (möglicherweise) Dateizeiger einrichtet.

  • Danke, dass Sie File für mich definieren, das macht viel mehr Sinn. Wenn ich jedoch immer noch File.Slice verwende (das einen Blob zurückgibt) und dann versuche, diesen Blob mit XMLHttpRequest.send(myBlob) an den Server zu senden, wie/wann werden die Daten aus der Datei abgerufen und an den Server übergeben . Oder wird dies einfach fehlschlagen/keine Daten senden? –

    – Ponml

    18. Juli 2014 um 22:37 Uhr

  • Ich habe meine Antwort aktualisiert, um ein wenig mehr Details zu geben. Ich bin ziemlich tief in dieses Zeug eingestiegen, als ich mein Javascript-Rsync-Dienstprogramm geschrieben habe: github.com/claytongulick/bit-sync

    – Clayton Gulick

    18. Juli 2014 um 22:50 Uhr

1180620cookie-checkWas macht eigentlich die HTML5 File.slice Methode?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy