Wie bekomme ich eine html5-Datei input akzeptiert nur bestimmte Datei-Typen konsequent in allen Browsern?

Laut diese Antwort auf Stack Overflow, können wir die accept Attribut eines <input type="file" /> filtern akzeptiert Eingabe wie folgt:

accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"

Jedoch, wie Sie sehen können läuft das einfach-snippet unten, Chrome 43.0.etwas scheint einfach ignorieren dieser Konfiguration, es ist zwar völlig klar Firefox 39.0.

Als ich den Wechsel zu einem mehr stumpfen Ansatz, mit:

accept=".xls, .xlsx"

... das funktioniert in Chrome aber macht Firefox etwas verwirrt, akzeptieren nur die Dateien mit der .xlsx Erweiterung.

Wenn man bedenkt, dass dies ist wahrscheinlich sehr verbreitet und basic, ich muss etwas fehlt: wo bin ich kniff? Wie bekomme ich eine html5-Datei-input-zu empfehlen, nur .xls und .xlsx Dateien konsequent in allen Browsern?

Hier ist ein Codeausschnitt illustriert mein Problem (zusammen mit einem JSFiddle link in Fall würden Sie wollen, mit ihm hantieren).

HTML:

Accepts application/vnd.ms-excel and the likes:<br />
<label for="file1">File input</label>
<input type="file" name="file1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
<hr />
Accepts .xls and .xlsx:<br />
<label for="file2">File input</label>
<input type="file" name="file2" accept=".xls, .xlsx"/>

  • Sieht aus wie die meisten der großen Browser implementieren Sie nun diese Funktion korrekt. Getestet habe ich beide Tasten in Chrome 36, Firefox 42, und Internet Explorer 11, und Sie funktioniert einwandfrei in allen von Ihnen. Schauen hier für mehr info.
  • Mmmh ich glaube, ich sollte haben wissen, ich bin mit einem Linux-system (Ubuntu). Obwohl, meine Kunden auch wissen, daß Firefox nicht herausfiltern .xls Dateien in beiden Versionen, mit einer up-to-date-FF auf einem Windows-10-Umgebung (keine Daten auf Chrome aber).
  • Getestet habe ich auf Win 7 und Vista. Leider, mein Win 10 box hat nur IE11 und Edge (will nicht an andere stellen, auf die es noch). Interessanterweise sind die Filter scheinen nicht zu funktionieren im Rand, trotz allem, was die caniuse - Seite sagt. Sie funktionieren im IE11, obwohl, unabhängig von OS. Ich habe bemerkt, dass der erste button scheint nur zu funktionieren, wenn der MIME-Typen registriert sind.
  • Beide arbeiten für mich, Windows 7, Firefox, 42 und 44.
  • Sie haben eine gute und ausführliche Antwort zu diesem Beitrag : html-input-file-accept-attribute-file-type +1 falls es hilft^^
  • Potenzielle Duplikat von stackoverflow.com/questions/181214/...

InformationsquelleAutor ccjmne | 2015-11-23
  1. 11

    Übertragen mime-Typ und Dateiendung

    <input type="file" name="file2" accept="text/csv, .csv"/>
    • nette Antwort. accept="text/csv -, .csv" kompatibel mit windows chrome-browser als auch
    InformationsquelleAutor cetver
  2. 1

    HAFTUNGSAUSSCHLUSS: Dies ist nicht eine Antwort durch irgendwelche Mittel, sondern lediglich ein Hinweis auf die potentiellen anderen Leser versuchen, verwenden Sie dieses Attribut auf eine falsche Weise.

    Auf diese nicht-offizielle W3C Referenz der accept - Attribut finden Sie im folgenden:

    Tipp: verwenden Sie nicht dieses Attribut als Validierungs-tool. Datei-uploads sollte auf dem server überprüft werden.

    Seine nicht empfohlen verwenden Sie dieses Attribut für die Validierung, da der Benutzer könnte das irgendwie umgehen und nicht alle Browser Verhalten sich gleich.

    • Dies ist nicht eine Antwort.
    • warum nicht? Er bat um eine Lösung, um Dateien überprüfen
    • Es gibt keine Erwähnung von jeder Validierung, was in der Frage, die eindeutig besagt, dass ich bin auf der Suche nach einem Weg, um konsequent schlagen - Dateien nach Dateityp oder-Erweiterung in der Datei-system-browsing-Fenster.
    • Als ich sagte in meiner Antwort seine nicht empfohlen, verwenden Sie die Html-Datei-picker "filter", "vorschlagen" - Dateien oder was auch immer. Was Ihr sucht, ist eine "Validierung" nur Dateien mit der expliziten extansion passieren soll, die Logik ist das, was ich versuche zu erwähnen in meiner Antwort
    • Ihre W3C-Zitat sagt File uploads should be validated on the server. Ihren code auf dem client ausgeführt wird. Auch für die Echtzeit-Datei-Validierung, die Sie wollen, zu betrachten, mehr als nur die Erweiterung, das ist wirklich nur ein Teil des namens.
    • Beachten Sie, dass w3schools nicht wirklich verbunden mit W3C... "Der Ort leitet seinen Namen aus dem World Wide Web (W3), aber nicht verbunden ist mit der W3C-Seite."

    InformationsquelleAutor Martin Godzina
  3. 1

    Entfernen Sie Platz in

    accept=".xls, .xlsx"

    zu

    accept=".xls,.xlsx"

    Funktioniert in Chrome, 69 und Firefox-61. Habe es noch nicht getestet unter Safari, IE und Edge noch.

    InformationsquelleAutor st0at
  4. 0

    Erste: haben Sie auf jeden Fall einen html5-doctype?

    <!DOCTYPE html>

    Verursachen, wenn Sie nicht haben, es funktioniert möglicherweise nicht in einigen Plätzen.

    Zweite: statt mit html können Sie, javascript oder jquery. Sehen Sie, diese Frage /Antwort: jquery - Prüfen, ob Datei-Erweiterung vor dem hochladen

    Dritte: meiner Erfahrung nach, einige html5-Zeug funktioniert einfach nicht, manchmal. Ich habe keine Ahnung, warum, aber es wird notwendig, um Probleme durch die Verwendung von jquery, zum Beispiel.

    Sollte man immer tun, eine serverseitige Validierung sowieso, um sicherzustellen, dass das, was die Nutzer hochladen ist in der Tat was Sie haben, beschränkt es.

    • Ich don ' T nicht einverstanden mit dem was Sie sagte, aber leider gibt es keine jquery-Lösung, bietet die gleiche Funktionalität wie die accept Attribut. Hoffentlich, die meisten devs erkennen, dass accept ist das nicht eigentlich zu begrenzen, welche Dateien der Benutzer auswählen kann. Was es wird sollen machen es einfacher für die Benutzer, um Dateien zu finden von dem angegebenen Typ(en) durch die Anwendung eines optionalen filters auf die Datei-Selektor-Schnittstelle.
    • BTW jQuery verwenden für was es gebaut wurde Extenibillity es ist ein ganz gutes plugin, das genau das tut, wie Sie benötigen hier: blueimp.github.io/jQuery-File-Upload habe ich google "jQuery-file-upload-plugin" und bekam es auch. ich ave verwendet Sie für genau das, was Sie wollen.
    • Ihr jQuery-widget macht nicht, was der accept Attribut besitzt (D. H. fügen Sie einen Datei-Typ-filter, um die Dateiauswahl-dialog). Es blockiert nicht genehmigte Datei-Typen nachdem Sie sind gewählt, das ist auch eine gute Sache zu tun, aber ist nicht wirklich ein Ersatz für accept's Funktionalität.
    • Sieht aus wie ich brauche, um eine Korrektur zu meinem ersten Kommentar. Nach die Spezifikation, "user-agents sollten verhindern, dass die Benutzer die Auswahl von Dateien, die werden nicht akzeptiert...", Also, das ist, wie accept ist soll zu arbeiten, aber kein browser ist implementiert es so. In jedem habe ich schon getestet, der Benutzer kann deaktivieren Sie den filter oder geben Sie einfach den Namen der Datei zu wählen, welche Art von Datei, die Sie wollen.
    InformationsquelleAutor Jacbey
Schreibe einen Kommentar