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

Streng genommen lautet die Antwort keine . Ein Entwickler kann nicht verhindern, dass ein Benutzer Dateien beliebigen Typs oder beliebiger Erweiterung hochlädt.

Aber dennoch, die akzeptieren Attribut von <input type = "file"> kann dabei helfen, einen Filter in dem vom Browser/Betriebssystem des Benutzers bereitgestellten Dateiauswahldialogfeld zu erstellen. Zum Beispiel,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) --> 
<input type="file" accept=".xls,.xlsx" />

sollte eine Möglichkeit bieten, andere Dateien als .xls oder .xlsx herauszufiltern. Obwohl die MDN Seite für input Element sagte immer, dass es dies unterstützt, zu meiner Überraschung funktionierte dies bei mir in Firefox bis Version 42 nicht. Dies funktioniert in IE 10+, Edge und Chrome.

Um also Firefox älter als 42 zusammen mit IE 10+, Edge, Chrome und Opera zu unterstützen, ist es wohl besser, eine kommagetrennte Liste von MIME-Typen zu verwenden:

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

[ Kante (EdgeHTML) Verhalten: Das Dateityp-Filter-Dropdown zeigt die hier genannten Dateitypen an, ist aber nicht der Standard im Dropdown. Der Standardfilter ist All files (*) .]

Sie können auch Sternchen in MIME-Typen verwenden. Zum Beispiel:

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types --> 

W3C empfiehlt Autoren, sowohl MIME-Typen als auch ihre entsprechenden Erweiterungen in der accept Attribut. Das heißt, die am besten Ansatz ist:

<!-- Right approach: Use both file extensions and their corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

JSFiddle desselben: aquí .

Referenz: Liste der MIME-Typen

WICHTIG! Die Verwendung des accept Attribut bietet lediglich eine Möglichkeit, die Dateien von Typen, die von Interesse sind, herauszufiltern. Browser erlauben es den Nutzern nach wie vor, Dateien beliebigen Typs auszuwählen. Zusätzliche (clientseitige) Prüfungen sollten durchgeführt werden (mit JavaScript, eine Möglichkeit wäre este ), und definitiv Dateitypen MUSS auf dem Server überprüft werden mit einer Kombination aus MIME-Typ, der sowohl die Dateierweiterung als auch die binäre Signatur ( ASP.NET , PHP , Rubinrot , Java ). Sie können auch Folgendes nachlesen diese Tabellen für Dateitypen und ihre magische Zahlen um eine robustere serverseitige Überprüfung durchzuführen.

Hier sind drei gut liest zu Datei-Uploads und Sicherheit.

EDIT : Vielleicht kann die Überprüfung des Dateityps anhand der binären Signatur auch auf der Client-Seite mit JavaScript (statt nur anhand der Erweiterung) unter Verwendung der HTML5 File API erfolgen, aber dennoch muss die Datei auf dem Server überprüft werden, da ein böswilliger Benutzer immer noch in der Lage ist, Dateien hochzuladen, indem er eine benutzerdefinierte HTTP-Anfrage stellt.

Answer 2

Es gibt das accept-Attribut für das input-Tag. Es ist jedoch in keiner Weise zuverlässig. Browser behandeln es höchstwahrscheinlich als "Vorschlag", d. h. der Benutzer wird, je nach Dateimanager, eine Vorauswahl treffen, die nur die gewünschten Typen anzeigt. Er kann aber auch "alle Dateien" wählen und jede beliebige Datei hochladen.

Zum Beispiel:

<form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

Lesen Sie mehr in der HTML5-Spezifikation

Denken Sie daran, dass sie nur als "Hilfe" für den Benutzer dienen soll, um die richtigen Dateien zu finden. Jeder Benutzer kann jede beliebige Anfrage an Ihren Server senden. Sie müssen immer alles server-seitig validieren.

Die Antwort lautet also: keine vous kann nicht einschränken aber Sie puede eine Vorauswahl treffen, aber Sie kann nicht sich darauf verlassen.

Alternativ oder zusätzlich kann man etwas Ähnliches tun, indem man den Dateinamen (Wert des Eingabefeldes) mit JavaScript überprüft, aber das ist Unsinn, weil es keinen Schutz bietet und auch die Auswahl für den Benutzer nicht erleichtert. Es gaukelt dem Webmaster nur vor, dass er geschützt ist und öffnet eine Sicherheitslücke. Für Benutzer, die alternative Dateierweiterungen (z. B. jpeg statt jpg), Großbuchstaben oder gar keine Dateierweiterungen haben (wie es auf Linux-Systemen üblich ist), kann dies ein Ärgernis sein.

Answer 3

Sie können die change Ereignis, um zu überwachen, was der Benutzer auswählt, und ihn zu diesem Zeitpunkt zu informieren, dass die Datei nicht akzeptabel ist. Es schränkt die tatsächliche Liste der angezeigten Dateien nicht ein, aber es kommt dem am nächsten, was man clientseitig tun kann, neben dem schlecht unterstützten accept Attribut.

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

<input type="file" id="someId" />

JSFiddle

Answer 4

Ja, Sie haben Recht. Mit HTML ist das unmöglich. Der Benutzer kann jede Datei auswählen, die er/sie möchte.

Sie könnten ein Stück schreiben JavaScript Code, um die Übermittlung einer Datei aufgrund ihrer Erweiterung zu verhindern. Beachten Sie jedoch, dass dies einen böswilligen Benutzer keineswegs daran hindert, jede beliebige Datei zu übermitteln.

Etwa so:

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

HTML-Code:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

Answer 5

Technisch können Sie die accept Attribut (alternativ in html5 ) auf der input Element, aber es wird nicht richtig unterstützt.