Begrenzung des Dateiformats bei Verwendung von <input type="file">?

Question

Ich möchte den Dateityp einschränken, der aus der nativen OS-Dateiauswahl ausgewählt werden kann, wenn der Benutzer auf die Schaltfläche Durchsuchen im Fenster <input type="file"> Element in HTML. Ich habe das Gefühl, dass es unmöglich ist, aber ich würde gerne wissen, ob es est eine Lösung. Ich möchte mich auf HTML und JavaScript beschränken; bitte kein Flash.

Answer 1

Ich kann folgendes vorschlagen:

• Wenn Sie den Benutzer dazu bringen müssen, standardmäßig eine Bilddatei auszuwählen, verwenden Sie accept="image/*".

  <input type="file" accept="image/*" />

• Wenn Sie nur bestimmte Bildtypen zulassen wollen, verwenden Sie accept="image/bmp, image/jpeg, image/png".

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

• Wenn Sie sich auf bestimmte Typen beschränken wollen, verwenden Sie accept=".bmp, .doc, .pdf".

  <input type="file" accept=".bmp, .doc, .pdf" />

• Sie können den Benutzer nicht darauf beschränken, den Dateityp für alle Dateien zu ändern, also überprüfen Sie immer den Dateityp in Skript und Server

Answer 2

Aufbauend auf den vorangegangenen Antworten zur Verwendung des accept-Attributs, können Sie dies mit der Methode Datei-API . Dies ermöglicht Ihnen auch den Zugriff auf den Inhalt der Datei, wenn Sie FileReader um eine lokale Analyse oder Datenverarbeitung durchzuführen.

Erstellen Sie zunächst ein Eingabeelement. Hier könnten Sie den Dateityp auf das Attribut accept anwenden, aber für das Beispiel werden Sie alle Dateitypen auswählen können.

<input type="file" name="upload" accept="*" multiple>

Als Nächstes müssen wir auf das "Change"-Ereignis des Eingabeelements hören.

var upload = document.querySelector('input[type="file"]');
upload.addEventListener('change', function() {});

Innerhalb der Funktion können Sie auf das Dateiobjekt der Eingabe zugreifen.

var files = this.files

Wir können nicht einfach über das Objekt iterieren, da es sich nicht um ein Array handelt, aber wir können die Funktion item() verwenden, um auf unser Dateiobjekt in der Liste zuzugreifen.

for (var i = 0; i < files.length; i++) {
    var file = files.item(i);
}

Jetzt, wo wir unser File-Objekt haben, können wir auf seine Eigenschaften name und type zugreifen und hier unsere Dateiprüfung durchführen. In diesem Fall prüfe ich, ob es sich um eine .txt-Datei handelt und gebe eine Meldung aus, wenn dies nicht der Fall ist. Sie können den Namen anhand eines Regex-Musters für den Dateityp oder den Typ anhand des MIME-Typs überprüfen.

if (!file.name.match(/.txt$/i) || file.type != 'text/plain') {
    console.log(file.name + ' is not a .txt file.');
}

var upload = document.querySelector('input[type="file"]');
upload.addEventListener('change', function() {
    var files = this.files;
    for (var i = 0; i < files.length; i++) {
        var file = files.item(i);
        if (!file.name.match(/.txt$/i) || file.type != 'text/plain') {
            console.log(file.name + ' is not a .txt file.');
        }
    }
});

<input type="file" name="upload" accept="*" multiple>

Die Datei-API wird von modernen Browsern sehr gut unterstützt. Durch die Kombination mit dem accept-Attribut können Sie leicht filtern, was der lokale Benutzer bei einem Upload auswählen kann, und nützliches Feedback geben. Wenn Sie die Datei hochladen, sollten Sie dennoch den Dateityp in Ihrem Backend überprüfen und validieren.