Wie kann <input type = “file” /> nur diese Typen akzeptieren?

77

Ich möchte, dass mein Uploader nur folgende Typen zulässt:

  • doc, docx.
  • xls, xlsx.
  • ppt, pptx.
  • TXT.
  • pdf.
  • Bildtypen.

Wie kann ich das erreichen? Was soll ich in das acceptAttribut einfügen? Danke für Ihre Hilfe.

BEARBEITEN!!!

Ich muss noch etwas fragen. Wenn das Popup zur Auswahl der Datei angezeigt wird, befindet sich in der unteren rechten Ecke eine Dropdown-Liste mit allen zulässigen Dateien. In meinem Fall wäre die Liste lang. Ich sehe in der Liste, es gibt eine Option namens All Supported Types. Wie kann ich es standardmäßig auswählen und alle anderen Optionen entfernen?

Jede Hilfe wird geschätzt. Vielen Dank.

html file-upload input Triet Doan
quelle
Wird das helfen? stackoverflow.com/questions/11601342/… . Nicht sicher, ob die MIME-Typen "application / doc", "application / pdf" und "application / ppt" unterstützt werden.
Neigyl R. Noval
1
Mögliches Duplikat des Limit-Dateiformats bei Verwendung von <input type = "file">?
Martin Thoma
Zu Ihrer zweiten Frage: "Das Attribut accept überprüft nicht die Typen der ausgewählten Dateien. Es enthält lediglich Hinweise für Browser, um Benutzer bei der Auswahl der richtigen Dateitypen zu unterstützen. Benutzer können (in den meisten Fällen) immer noch einen umschalten Option in der Dateiauswahl, mit der Sie diese überschreiben und eine beliebige Datei auswählen und dann falsche Dateitypen auswählen können. Aus diesem Grund sollten Sie sicherstellen, dass das Attribut accept durch eine entsprechende serverseitige Überprüfung gesichert wird. " developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
Cody

Antworten:

135

Der Wert des acceptAttributs ist gemäß HTML5 LC eine durch Kommas getrennte Liste von Elementen, von denen jedes ein bestimmter Medientyp ist image/gif, oder eine solche Notation image/*, die sich auf alle imageTypen bezieht , oder eine Dateinamenerweiterung wie.gif . IE 10+ und Chrome unterstützen all dies, während Firefox die Erweiterungen nicht unterstützt. Daher ist es am sichersten, Medientypen und Notationen wie image/*in diesem Fall zu verwenden

<input type="file" name="foo" accept=
"application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,
text/plain, application/pdf, image/*">

wenn ich die Absichten richtig verstehe. Beachten Sie, dass Browser die Medientypnamen möglicherweise nicht genau so erkennen, wie sie in der autorisierenden Registrierung angegeben sind. Daher sind einige Tests erforderlich.

Jukka K. Korpela
quelle
4
Dies funktioniert nicht, wenn Ihre Dokumentdatei mit Ubuntu-Software erstellt wurde.
Shabbir Dhangot
@ Jukka K. Korpela dieser Filter bringt mir alle Bürodateien, die ich will, danke
pavan kumar
17
So fügen Sie suport für docx, xlsx und pptx: application / vnd.openxmlformats-officedocument.wordprocessingml.document, application / vnd.openxmlformats-officedocument.spreadsheetml.sheet, application / vnd.openxmlformats-officedocument.presentationml.slideshow
Charles Cavalcante
1
Vielleicht stimmte es 2014, als diese Antwort gegeben wurde, aber ich kann bestätigen, dass eine durch Kommas getrennte Liste von Erweiterungen in Firefox ordnungsgemäß funktioniert.
Joe Firebaugh
hat beim Hochladen von einem Android / iOS-Gerät nicht funktioniert. Wenn jemand eine Lösung hat, lass es mich wissen.
Goldy
88

Verwenden Sie wie unten

<input type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf" />
Ajith
quelle
1
Browser überprüfen normalerweise nicht den Dateiinhalt, daher ist die Erweiterung in Ordnung - auch bevorzugt, da Browser nicht alle MIME-Typen kennen. Sie müssen den Dateiinhalt selbst überprüfen.
Luxigo
10

Verwenden Sie das Attribut accept mit dem MIME_type als Werte

<input type="file" accept="image/gif, image/jpeg" />
Chamika Sandamal
quelle
5
Der angegebene Code akzeptiert nur GIF- und JPEG-Dateien, im Gegensatz zu dem, was in der Frage angefordert wurde.
Jukka K. Korpela
2
@ JukkaK.Korpela, Dies ist nur Beispielcode und Sie können das acceptAttribut mit dem MIME_types als Werte setzen
Chamika Sandamal
Dies bietet weiterhin die Option "Alle Dateien".
DaveB
10

WICHTIGES UPDATE:

Da nur application / msword, application / vnd.ms-excel, application / vnd.ms-powerpoint verwendet wird, sind nur MS-Produkte bis 2003 und nicht die neuesten zulässig. Ich habe folgendes gefunden:

application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation

Und das schließt die neuen ein. Für andere Dateien können Sie den MIME-TYP in Ihrer Datei auf diese Weise abrufen (entschuldigen Sie die Sprache) (in MIME-Listentypen gibt es diese nicht):

Geben Sie hier die Bildbeschreibung ein

Sie können den Inhaltstyp auswählen und kopieren

Epistomai
quelle
7

für PowerPoint- und PDF-Dateien: 

<html>
<input type="file" placeholder="Do you have a .ppt?" name="pptfile" id="pptfile" accept="application/pdf,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
</html>
Amir Md Amiruzzaman
quelle
3

Wie auf w3schools angegeben :

Audio / * - Alle Audiodateien werden akzeptiert

video / * - Alle Videodateien werden akzeptiert

image / * - Alle Bilddateien werden akzeptiert

MIME_type - Ein gültiger MIME-Typ ohne Parameter. Unter IANA-MIME-Typen finden Sie eine vollständige Liste der Standard-MIME-Typen

Wilker Iceri
quelle
3
@MateusLeon Nicht verlieren verlieren.
reformiert
0

für Bild schreibe dies

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

Zum anderen können Sie das Attribut accept in Ihrem Formular verwenden, um dem Browser vorzuschlagen, bestimmte Typen einzuschränken. Sie sollten jedoch Ihren serverseitigen Code erneut überprüfen, um dies sicherzustellen. Vertraue niemals dem, was der Kunde dir schickt

Sagar Vaghela
quelle
4
Der angegebene Code akzeptiert nur Bilddateien, im Gegensatz zu dem, was in der Frage angefordert wurde.
Jukka K. Korpela