HTML5 -Datei -Upload -Download -Instanzcode

Die in HTML5 bereitgestellte Datei -API enthält eine Fülle von Anwendungen im Frontend. Die Kompatibilität jedes Browsers ist auch besser, einschließlich des mobilen Terminals, außer dass IE nur die Version von IE10 oder höher unterstützt. Wenn Sie die Funktion der Operationsdatei besser beherrschen möchten, müssen Sie zunächst jede API vertraut machen.

Die Eingabe -Beschriftung in HTML [type = Datei] verfügt über ein Mehrfachattribut, mit dem Benutzer mehrere Dateien auswählen können, und das filelistische Objekt bedeutet eine Liste der vom Benutzer ausgewählten Dateien. Jede Datei in dieser Liste ist ein Dateiobjekt.

1. Das Attribut des Dateiobjekts:
2. Name: Dateiname, enthält keine Pfade.
3. Typ: Dateityp. Die Dateitypdateien beginnen mit Image/, was auf das Hochladen des Bildes beschränkt sein kann.
4. Größe: Dateigröße. Andere Operationen können gemäß der Größe der Datei ausgeführt werden.
5. LastModify: Die endgültige Änderungszeit der Datei.

 <Eingabe type = Datei id = Dateien multiple> <script> var elem = document.getElementById ('Dateien'); ist Bilder und die Dateigröße beträgt weniger als 200 KB, wenn (Dateien [i] .Type.indexof ('Image/')! == -1 && Dateien [i] .Size <204800) {console.log (Dateien [i] .Name);}}} </script>

Es gibt ein Zugriffsattribut in der Eingabe, mit dem der Dateityp angeben kann, der per Datei -Upload übermittelt werden kann.

Accept = Image/* kann verwendet werden, um nur auf Bildformate hochzuladen. Es gibt jedoch ein Problem mit einer langsamen Reaktion im Webkit -Browser.

Die Lösung besteht darin, den* Pass in den angegebenen MIME -Typ zu ändern.

 <Eingabetyp = Datei Accept = Image/GIF, Bild/JPEG, Bild/JPG, Bild/PNG>

Das Blob -Objekt entspricht einem Container, mit dem Binärdaten gespeichert werden können. Es hat zwei Attribute, das Größenattribut repräsentiert die Bytelänge und das Typattribut den MIME -Typ.

Wie man erstellt

Das Blob -Objekt kann mit der Blob () -Konstruktfunktion erstellt werden.

 var blob = neuer Blob (['Hallo'], {Typ: text/plain});

Der erste Parameter im Blob -Konstruktor ist ein Array, mit dem ArrayBuffer -Objekte, Arraybufferview -Objekte, Blob -Objekte und Zeichenfolge gespeichert werden können.

Das Blob -Objekt kann ein neues Blob -Objekt über die Slice () -Methode zurückgeben.

 var newblob = blob.slice (0,5, {type: text/plain});

Die Slice () -Methode verwendet drei Parameter, die alle optional sind. Der erste Parameter repräsentiert die Startposition der Binärdaten im Blob -Objekt, der zweite Parameter repräsentiert das Ende der Replikation, und der dritte Parameter ist der MIME -Typ des BLOB -Objekts.

Canvas.ttoblob () kann auch Blob -Objekte erstellen. Toblob () verwendet drei Parameter, die erste ist die Rückruffunktion, die zweite ist der Bildtyp, die Standardeinstellung ist Bild/PNG, die dritte ist die Bildqualität, der Wert zwischen 0 und 1.

 var canvas = document.getElementById ('canvas');

BLOD -Objekte können eine Netzwerkadresse über das Objekt von window.url generieren, kombiniert mit dem Download -Attribut des A -Tags, um die Funktion der Download -Datei zu erreichen.

Laden Sie beispielsweise Leinwand als Bilddatei herunter.

 var canvas = document.getElementById ('canvas'); var url = url.createObject "Blob); var a = document.createelement ('a'); / Erzählen Sie den Browser nach dem Herunterladen.

Die Zeichenfolge kann auch als Textdatei mit einer ähnlichen Methode gespeichert werden.

Das FileReader -Objekt wird hauptsächlich verwendet, um die Datei in den Speicher zu lesen und die Daten in der Datei zu lesen. Erstellen Sie ein FileReader -Objekt, indem Sie eine Funktion erstellen

 var reader = new filerereader ();

Das Objekt hat die folgenden Methoden:

1. Abrufen: Interrupt -Lesoperation.
2. ReadasArrayBuffer: Lesen Sie den Dateiinhalt im ArrayBuffer -Objekt.
3. ReadasbinaryString: Lesen Sie Dateien als Binärdaten.
4. ReadasDataurl: Lesen Sie die Datei als Daten: URL -Format.
5. Readastext: Lesen Sie Dateien als Text.

Die allgemeine Anwendung besteht darin, das Bild nach dem Hochladen von Bildern auf den Client durch den ReadasDataurl () anzuzeigen.

 <Eingabe type = Datei id = Dateien Akzeptieren = Bild/JPEG, Image/JPG, Image/PNG> <img src = blank.gif id = preview> <skript> var elem = d ('Dateien'), IMG = Dokument. GetElementById ('Vorschau'); .src = ev.target.result;} reader.readasDataurl (Dateien [0]);}} </script>

Wenn Sie jedoch Fotos auf einigen Mobiltelefonen machen, werden beim Hochladen von Fotos Fehler aufgenommen, und die Fotos werden gefunden, einschließlich Samsung und iPhone. Wesen Wesen Die Lösung erklärt hier nicht.

ReadaStext () des FileReader -Objekts kann den Text der Datei in Kombination mit der Funktion des BLOB -Objekts zum Herunterladen der Datei lesen, dann laden Sie die Datenexportdatei auf den lokalen Bereich. Durch Eingabe und verwenden Sie Readastext (), um Readastext () zu verwenden, Text und Wiederherstellung von Daten.

Der Code ähnelt der obigen Funktion.

ATOB- und BTOA -Methoden werden zu HTML5 hinzugefügt, um die Basis64 -Codierung zu unterstützen. Ihre Benennung ist auch sehr einfach.

 var a = https: //lin-xin.github.io; iConsole.log (b);

Die BTOA -Methode codiert die Zeichenfolge A, die den Wert von a nicht ändert und nach einer Codierung einen Wert zurückgibt.

Die ATOB -Methode dekodiert die codierte Zeichenfolge.

Die Chinesen in den Parametern haben jedoch den Zeichenbereich der 8 -Bit -ASCII -Codierung überschritten, und der Browser meldet einen Fehler. Daher müssen Sie zuerst die Encodeuricomponent codieren.

 var A = Hello World;

Das oben genannte ist der Inhalt dieses Artikels.