Ich habe ein Datei-Upload-Objekt auf meiner Seite:
<input type="file" ID="fileSelect" />
mit den folgenden Excel-Dateien auf meinem Desktop:
- file1.xlsx
- file1.xls
- file.csv
Ich möchte , dass die Datei - Upload zu NUR zeigen .xlsx
, .xls
& .csv
Dateien.
Unter Verwendung des accept
Attributs fand ich, dass diese Inhaltstypen sich um .xlsx
& .xls
Erweiterungen kümmerten ...
accept
= application / vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)
accept
= application / vnd.ms-excel (.XLS)
Ich kann jedoch nicht den richtigen Inhaltstyp für eine Excel-CSV-Datei finden! Irgendwelche Vorschläge?
BEISPIEL: http://jsfiddle.net/LzLcZ/
Antworten:
Nun, das ist peinlich ... Ich habe die Lösung gefunden, nach der ich gesucht habe, und es könnte nicht einfacher sein. Ich habe den folgenden Code verwendet, um das gewünschte Ergebnis zu erhalten. Hoffe das hilft jemandem in der Zukunft. Vielen Dank an alle für Ihre Hilfe.
Gültige Akzeptiertypen:
Verwenden Sie für CSV- Dateien (.csv):
Verwenden Sie für Excel-Dateien 97-2003 (.xls):
Verwenden Sie für Excel-Dateien 2007+ (.xlsx):
Verwenden Sie für Textdateien (.txt):
Verwenden Sie für Bilddateien (.png / .jpg / etc):
Verwenden Sie für HTML-Dateien (.htm, .html):
Für Videodateien (.avi, .mpg, .mpeg, .mp4), zu verwenden:
Verwenden Sie für Audiodateien (.mp3, .wav usw.):
Verwenden Sie für PDF-Dateien :
DEMO:
http://jsfiddle.net/dirtyd77/LzLcZ/144/
HINWEIS:
Wenn Sie versuchen, Excel CSV-Dateien (
.csv
) anzuzeigen , verwenden Sie NICHT :text/csv
application/csv
text/comma-separated-values
( funktioniert nur in Opera ).Wenn Sie versuchen, einen bestimmten Dateityp anzuzeigen (z. B. ein
WAV
oderPDF
), funktioniert dies fast immer ...quelle
<input type="file" accept=".csv, text/csv" />
arbeitete für mich in Firefox, Chrome und Oper auf Mac. Nur CSV funktionierte nicht in allen Browsern.Heutzutage können Sie einfach die Dateierweiterung verwenden
quelle
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel
) scheint sich noch nicht zur Arbeit auf Edge 41.16299.820.0 stackoverflow.com/questions/31875617/... wpdev.uservoice.com/forums/257854-microsoft-edge-developer/...Dom dieses Attribut ist sehr alt und wird meines Wissens in modernen Browsern nicht akzeptiert. Aber hier ist eine Alternative dazu: Versuchen Sie dies
Ich denke, es wird Ihnen natürlich helfen, dieses Skript entsprechend Ihren Anforderungen zu ändern.
quelle
accept
Attributs ist der Hinweis, den es auf den Dialog zum Öffnen von Dateien gibt. Dem Benutzer sollten standardmäßig übereinstimmende Dateien angezeigt werden, vermutlich mit der Option, andere Typen auszuwählen, wenn er dies wünscht - so verhalten sich die meisten modernen Browser jetzt.Ich habe
text/comma-separated-values
für CSV MIME-Typ in Accept-Attribut verwendet und es funktioniert gut in Opera. Versuchttext/csv
ohne Glück.Einige andere MIME-Typen für CSV, wenn die vorgeschlagenen nicht funktionieren:
Quelle: http://filext.com/file-extension/CSV
quelle
Dies hat bei mir unter Safari 10 nicht funktioniert:
Ich musste stattdessen Folgendes schreiben:
quelle
Sie können den richtigen Inhaltstyp für jede Datei ermitteln, indem Sie einfach Folgendes tun:
1) Interessierte Datei auswählen,
2) Und führen Sie dies in der Konsole aus:
Sie können auch das Attribut "multiple" für Ihre Eingabe festlegen, um den Inhaltstyp für mehrere Dateien gleichzeitig zu überprüfen und als Nächstes Folgendes zu tun:
Das Akzeptieren von Attributen hat einige Probleme mit mehreren Attributen und funktioniert in diesem Fall nicht richtig.
quelle
Ich habe die Lösung von @yogi geändert. Der Zusatz ist, dass ich den Eingabeelementwert zurücksetze, wenn die Datei ein falsches Format hat.
Ich habe eine benutzerdefinierte Überprüfung erstellt, da der Benutzer im geöffneten Dateifenster weiterhin die Optionen "Alle Dateien ('*')" auswählen kann, unabhängig davon, ob ich das Attribut accept explizit im Eingabeelement festgelegt habe.
quelle
Jetzt können Sie das neue HTML5-Eingabevalidierungsattribut verwenden
pattern=".+\.(xlsx|xls|csv)"
.quelle
This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.
Bezug auf die Input - Datei, gehen sie zu sagen auffile: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.