Funktionen zum Hochladen und Herunterladen von Dateien in HTML5

Bei der Website-Erstellung sind Datei-Uploads und -Downloads unvermeidlich. Die in HTML5 bereitgestellte API verfügt über eine Fülle von Front-End-Anwendungen, die die Kompatibilitätsprobleme verschiedener Browser perfekt lösen, also beeilen Sie sich und holen Sie sich das!

FileList-Objekt und Dateiobjekt

Das input[type="file"]-Tag in HTML verfügt über ein Mehrfachattribut, das es dem Benutzer ermöglicht, mehrere Dateien auszuwählen durch den Benutzer. 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.

<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 并且文件大小小于 200kb
            if(files[i].type.indexOf(&#39;image/&#39;) !== -1 && files[i].size < 204800){
                            console.log(files[i].name);
            }
        }
    }
    </script>

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

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.

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

Blob-Objekt

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.

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

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

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

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

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.

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

Dateien herunterladen

Das Blod-Objekt kann über das window.URL-Objekt eine Netzwerkadresse generieren und diese mit dem Download-Attribut des a-Tags kombinieren, um die Datei-Download-Funktion zu implementieren.

Laden Sie beispielsweise Canvas als Bilddatei herunter.

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

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

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

var reader = new FileReader();

Das Objekt verfügt über die folgenden Methoden:

• 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.

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

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

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.

var a = "https://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

Die BTOA-Methode kodiert die Zeichenfolge a, ohne den Wert von a zu ändern, und gibt einen kodierten Wert zurück.
atob-Methode dekodiert die codierte Zeichenfolge.

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.

var a = "哈喽 世界";var b = btoa(encodeURIComponent(a));
var c = decodeURIComponent(atob(b));console.log(b);//JUU1JTkzJTg4JUU1JTk2JUJEJTIwJUU0JUI4JTk2JUU3JTk1JThDconsole.log(c);

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