Beispiele für das Hochladen und Herunterladen von Dateien in h5

Vorwort

Die in HTML5 bereitgestellte Datei-API verfügt über umfangreiche Anwendungen im Frontend. Das Hochladen, Herunterladen, Lesen von Inhalten usw. kommt bei täglichen Interaktionen sehr häufig vor. Und die Kompatibilität mit verschiedenen Browsern ist relativ gut, auch mit mobilen Endgeräten, mit der Ausnahme, dass IE nur Versionen über IE10 unterstützt. Wenn Sie die Funktionen von Betriebsdateien besser beherrschen möchten, müssen Sie zunächst mit jeder API vertraut sein.

Ursprünglicher Autor: Lin ermöglicht Der Benutzer wählt mehrere Dateien aus, und das FileList-Objekt stellt die Liste der vom Benutzer ausgewählten Dateien dar. Jede Datei in dieser Liste ist ein Dateiobjekt.

Attribute des Dateiobjekts:

Name: Dateiname, ohne Pfad.

• Typ: Dateityp. Dateien vom Typ Bild beginnen alle mit image/, was verwendet werden kann, um das Hochladen auf nur Bilder zu beschränken.

• Größe: Dateigröße. Abhängig von der Dateigröße können zusätzliche Vorgänge ausgeführt werden.

• lastModified: Der Zeitpunkt, zu dem die Datei zuletzt geändert wurde.

In der Eingabe gibt es ein Accept-Attribut, mit dem die Dateitypen angegeben werden können, die per Datei-Upload übermittelt werden können.

<input type="file" id="files" multiple><script>var elem = document.getElementById(&#39;files&#39;);elem.onchange = function (event) {var files = event.target.files;for (var i = 0; i < files.length; i++) {// 文件类型为 image 并且文件大小小于 200kbif(files[i].type.indexOf(&#39;image/&#39;) !== -1 && files[i].size < 204800){console.log(files[i].name);}}}</script>

accept="image/*" kann verwendet werden, um das Hochladen nur auf Bildformate zu beschränken. Es gab jedoch ein Problem mit der langsamen Reaktion des Webkit-Browsers und es dauerte mehrere Sekunden, bis das Dateiauswahlfeld angezeigt wurde.

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

Blob-Objekt

<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">

Blob-Objekt entspricht einem Container und kann zum Speichern von Binärdaten verwendet werden. Es verfügt über zwei Attribute: Das Größenattribut repräsentiert die Bytelänge und das Typattribut repräsentiert den MIME-Typ.

So erstellen Sie

Blob-Objekte können mit dem Blob()-Konstruktor erstellt werden.

Der erste Parameter im Blob-Konstruktor ist ein Array, das ArrayBuffer-Objekte, ArrayBufferView-Objekte, Blob-Objekte und Strings speichern kann.

var blob = new Blob(['hello'], {type:"text/plain"});

Blob-Objekte können über die Methode „slice()“ ein neues Blob-Objekt zurückgeben.

Die Methode „slice()“ verwendet drei Parameter, die alle optional sind. Der erste Parameter stellt die Startposition der Binärdaten im zu kopierenden Blob-Objekt dar, der zweite Parameter stellt die Endposition der Kopie dar und der dritte Parameter ist der MIME-Typ des Blob-Objekts.

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

canvas.toBlob() kann auch Blob-Objekte erstellen. toBlob() verwendet drei Parameter, der erste ist die Rückruffunktion, der zweite ist der Bildtyp, der Standardwert ist image/png und der dritte ist die Bildqualität, der Wert liegt zwischen 0 und 1.

Datei herunterladen

var canvas = document.getElementById('canvas');canvas.toBlob(function(blob){ console.log(blob); }, "image/jpeg", 0.5);

Das Blod-Objekt kann über das window.URL-Objekt eine Netzwerkadresse generieren und diese mit dem Download-Attribut des zu implementierenden Tags kombinieren die Funktion zum Herunterladen von Dateien.

Laden Sie beispielsweise Canvas als Bilddatei herunter.

Mit einer ähnlichen Methode können Sie die Zeichenfolge auch als Textdatei speichern.

var canvas = document.getElementById('canvas');canvas.toBlob(function(blob){// 使用 createObjectURL 生成地址，格式为 blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36var url = URL.createObjectURL(blob);var a = document.createElement('a');a.download = 'canvas';a.href = url;// 模拟a标签点击进行下载a.click();// 下载后告诉浏览器不再需要保持这个文件的引用了URL.revokeObjectURL(url);});

FileReader-Objekt

FileReader-Objekt wird hauptsächlich zum Einlesen von Dateien in den Speicher und zum Lesen der Daten in der Datei verwendet. Erstellen Sie ein FileReader-Objekt über den Konstruktor

Das Objekt verfügt über die folgenden Methoden:

var reader = new FileReader();

abort: Brechen Sie den Lesevorgang ab.

• readAsArrayBuffer: Liest den Dateiinhalt in das ArrayBuffer-Objekt.

• readAsBinaryString: Liest die Datei als Binärdaten.

• readAsDataURL: Liest die Datei als Zeichenfolge im Daten-URL-Format.

• readAsText: Liest die Datei als Text.

• Bildvorschau hochladen

Eine häufige Anwendung besteht darin, das Bild über readAsDataURL() anzuzeigen, nachdem das Bild auf den Client hochgeladen wurde.

Es gibt jedoch einen Fehler beim Hochladen von Fotos, wenn Sie auf einigen Mobiltelefonen Bilder im Hochformat aufnehmen, und Sie werden feststellen, dass die Fotos auf dem Kopf stehen, einschließlich Samsung und iPhone. . . Die Lösung wird hier nicht erklärt. Wenn Sie interessiert sind, können Sie Folgendes anzeigen: Lösung für die Rotation und Komprimierung mobiler Bild-Uploads

<input type="file" id="files" accept="image/jpeg,image/jpg,image/png"><img  src="/static/imghwm/default1.png"  data-src="blank.gif"  class="lazy"   id="preview" alt="Beispiele für das Hochladen und Herunterladen von Dateien in h5" ><script>var elem = document.getElementById(&#39;files&#39;),img = document.getElementById(&#39;preview&#39;);elem.onchange = function () {var files = elem.files,reader = new FileReader();if(files && files[0]){reader.onload = function (ev) {img.src = ev.target.result;}reader.readAsDataURL(files[0]);}}</script>

Datensicherung und -wiederherstellung

ReadAsText() des FileReader-Objekts kann lesen In Kombination mit der Funktion des Blob-Objekts zum Herunterladen von Dateien ist es möglich, die Datenexportdatei lokal zu sichern. Wenn die Daten wiederhergestellt werden müssen, laden Sie die Sicherungsdatei über die Eingabe hoch und verwenden Sie readAsText (), um den Text zu lesen und die Daten wiederherzustellen.

Der Code ähnelt der obigen Funktion und wird hier nicht wiederholt. Informationen zu bestimmten Anwendungen finden Sie unter: Notepad

Base64-Codierung

Neue atob- und btoa-Methoden in HTML5 hinzugefügt, um Base64-Codierung zu unterstützen. Ihre Namen sind ebenfalls sehr einfach, b zu a und a zu b, was für Kodierung und Dekodierung steht.

Die BTOA-Methode kodiert die Zeichenfolge a, ändert den Wert von a nicht und gibt einen kodierten Wert zurück.

atob-Methode dekodiert die codierte Zeichenfolge.

var a = "lin-xin.github.io";var b = btoa(a);var c = atob(b);console.log(a);     // https://lin-xin.github.ioconsole.log(b);     // aHR0cHM6Ly9saW4teGluLmdpdGh1Yi5pbw==console.log(c);     // https://lin-xin.github.io

Aber der Parameter enthält chinesische Zeichen, die den Zeichenbereich der 8-Bit-ASCII-Codierung überschreiten, und der Browser meldet einen Fehler. Daher muss das Chinesisch zuerst mit encodeURIComponent codiert werden.

Das obige ist der detaillierte Inhalt vonBeispiele für das Hochladen und Herunterladen von Dateien in h5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!