HTML Input="file" Accept Attribute File Type (CSV)

Question

Ich habe ein Dateiupload-Objekt auf meiner Seite:

<input type="file" ID="fileSelect" />

mit den folgenden Exceldateien auf meinem Desktop:

1. datei1.xlsx
2. datei1.xls
3. Datei.csv

Ich möchte, dass der Datei-Upload auf NUR anzeigen .xlsx , .xls , & .csv Dateien.

Die Verwendung des accept Attribut habe ich festgestellt, dass diese Inhaltstypen die folgenden Aufgaben übernehmen .xlsx & .xls Erweiterungen...

accept = application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)

accept = Anwendung/vnd.ms-excel (.XLS)

Ich finde jedoch nicht den richtigen Inhaltstyp für eine Excel-CSV-Datei! Irgendwelche Vorschläge?

BEISPIEL: http://jsfiddle.net/LzLcZ/

Answer 1

Nun, das ist peinlich... Ich habe die Lösung gefunden, nach der ich gesucht habe, und sie könnte nicht einfacher sein. Ich habe den folgenden Code verwendet, um das gewünschte Ergebnis zu erzielen.

<label for="fileSelect">Spreadsheet</label>
<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

Gültige Akzeptanztypen:

Para CSV Dateien (.csv), verwenden:

<input type="file" accept=".csv" />

Para Excel-Dateien 97-2003 (.xls), verwenden:

<input type="file" accept="application/vnd.ms-excel" />

Para Excel-Dateien 2007+ (.xlsx), verwenden:

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

Para Textdateien (.txt) verwenden:

<input type="file" accept="text/plain" />

Para Bilddateien (.png/.jpg/etc), verwenden:

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

Para HTML-Dateien (.htm,.html), verwenden:

<input type="file" accept="text/html" />

Para Video-Dateien (.avi, .mpg, .mpeg, .mp4), verwenden:

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

Para Audio-Dateien (.mp3, .wav, usw.), verwenden:

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

Para PDF-Dateien verwenden:

<input type="file" accept=".pdf" /> 

DEMO:
http://jsfiddle.net/dirtyd77/LzLcZ/144/

---

HINWEIS:

Wenn Sie versuchen, Excel-CSV-Dateien anzuzeigen ( .csv ), tun PAS verwenden:

• text/csv
• application/csv
• text/comma-separated-values ( funktioniert nur in Opera ).

---

Wenn Sie versuchen, eine bestimmter Dateityp (zum Beispiel eine WAV o PDF ), dann wird dies fast immer funktionieren...

 <input type="file" accept=".FILETYPE" />

Hier ist der Grund dafür:

En application Typen bedeuten oft, wo die Datei zu öffnen ist. Zum Beispiel, Abode Reader. Aber wenn diese Datei hochgeladen wird, kümmert sich der Browser nicht darum, diese Anwendung zu öffnen und danach zu fragen. Aber die Erweiterung oder Typwörter wie der MIME image o audio usw., die sich direkt auf Akteneinheiten beziehen.

Es ist möglich, sie im Zusammenhang mit einer File DOM-Instanz. Sie sollten also den Namen des Erweiterungsformats verwenden. Auf vielen Geräten, wie z.B. Handys, sieht man, wenn man auf Datei auswählen klickt, dass die nicht akzeptierten Dateien im Benutzermenü in grau ausgeschlossen sind... Wir wünschen Ihnen viel Spaß mit Ihren Dateien!

Answer 2

Heutzutage können Sie einfach die Dateierweiterung

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

Answer 3

Dom dieses Attribut ist sehr alt und nicht in modernen Browsern akzeptiert, soweit ich weiß, aber hier ist eine Alternative zu ihm, versuchen Sie diese

<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".xlsx", ".xls", ".csv");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    }
    else return true;
}
</script>

<input type="file" id="file" onchange="checkfile(this);" />

Ich denke, es wird Ihnen helfen, natürlich können Sie dieses Skript nach Ihren Bedürfnissen ändern.

Answer 4

Ich habe verwendet text/comma-separated-values für CSV mime-type im accept-Attribut und es funktioniert gut in Opera. Versucht text/csv ohne Erfolg.

Einige andere MIME-Typen für CSV, falls die vorgeschlagenen nicht funktionieren:

• text/komma-getrennte-werte
• text/csv
• Anwendung/csv
• Anwendung/Excel
• anwendung/vnd.ms-excel
• anwendung/vnd.msexcel
• text/beliebiger text

Quelle: http://filext.com/file-extension/CSV

Answer 5

Das hat bei mir unter Safari 10 nicht funktioniert:

<input type="file" accept=".csv" />

Ich musste stattdessen das hier schreiben:

<input type="file" accept="text/csv" />