it-swarm.com.de

Wie kann man <input type = "file" /> nur diese Typen akzeptieren lassen?

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

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

Wie kann ich das erreichen? Was soll ich in das accept Attribut setzen? Danke für Ihre Hilfe.

BEARBEITEN !!!

Ich muss noch etwas fragen. Wenn das Popup zur Auswahl einer Datei angezeigt wird, befindet sich in der rechten unteren Ecke eine Dropdown-Liste mit allen zulässigen Dateien. In meinem Fall wäre die Liste lang. Ich sehe in der Liste 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.

57
Triet Doan

Der Wert des accept-Attributs ist gemäß HTML5 LC eine durch Kommas getrennte Liste von Elementen, von denen jedes einen bestimmten Medientyp wie image/gif oder eine Notation wie image/*, das sich auf alle image Typen bezieht, oder eine Dateinamenerweiterung wie .gif. IE 10+ und Chrome) unterstützen all dies, während Firefox die Erweiterungen nicht unterstützt. Daher ist die Verwendung von Medientypen am sichersten und Notationen wie image/*, in diesem Fall

<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 wie in der maßgeblichen Registrierung angegeben erkennen. Daher sind einige Tests erforderlich.

100

Verwenden Sie wie unten

<input type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf" />
68
Ajith

Verwenden Sie das accept-Attribut mit dem MIME_type als Werte

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

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

WICHTIGES UPDATE:

Da nur application/msword verwendet wird, erlaubt application/vnd.ms-Excel, application/vnd.ms-PowerPoint ... nur bis 2003 MS-Produkte und nicht die neuesten. 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 folgende Weise abrufen (pardon the lang) (in MIME-Listentypen gibt es diese nicht):

enter image description here

Sie können den Inhaltstyp auswählen und kopieren

5
Epistomai

As 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

4
Wilker Iceri

zum Bild schreibe dies

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

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

1
Sagar Vaghela