Heim > Artikel > Web-Frontend > Beispiele für das Hochladen und Herunterladen von Dateien in h5
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.
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.
<input type="file" id="files" multiple><script>var elem = document.getElementById('files');elem.onchange = function (event) {var files = event.target.files;for (var i = 0; i < files.length; i++) {// 文件类型为 image 并且文件大小小于 200kbif(files[i].type.indexOf('image/') !== -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.
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.
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.
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.
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
<input type="file" id="files" accept="image/jpeg,image/jpg,image/png"><img src="blank.gif" id="preview"><script>var elem = document.getElementById('files'),img = document.getElementById('preview');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.
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.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
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!