HTML-Eingabe = "Datei" Attribut-Dateityp akzeptieren (CSV)

Ich habe ein Datei-Upload-Objekt auf meiner Seite:

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

mit den folgenden Excel-Dateien auf meinem Desktop:

1. file1.xlsx
2. file1.xls
3. file.csv

Ich möchte , dass die Datei - Upload zu NUR zeigen .xlsx, .xls& .csvDateien.

Unter Verwendung des acceptAttributs fand ich, dass diese Inhaltstypen sich um .xlsx& .xlsErweiterungen 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/

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.

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

Gültige Akzeptiertypen:

Verwenden Sie für CSV- Dateien (.csv):

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

Verwenden Sie für Excel-Dateien 97-2003 (.xls):

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

Verwenden Sie für Excel-Dateien 2007+ (.xlsx):

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

Verwenden Sie für Textdateien (.txt):

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

Verwenden Sie für Bilddateien (.png / .jpg / etc):

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

Verwenden Sie für HTML-Dateien (.htm, .html):

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

Für Videodateien (.avi, .mpg, .mpeg, .mp4), zu verwenden:

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

Verwenden Sie für Audiodateien (.mp3, .wav usw.):

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

Verwenden Sie für PDF-Dateien :

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

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 WAVoder PDF), funktioniert dies fast immer ...

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

Heutzutage können Sie einfach die Dateierweiterung verwenden

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

Dom dieses Attribut ist sehr alt und wird meines Wissens in modernen Browsern nicht akzeptiert. Aber hier ist eine Alternative dazu: Versuchen Sie dies

<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 natürlich helfen, dieses Skript entsprechend Ihren Anforderungen zu ändern.

Ich habe text/comma-separated-valuesfü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:

• Text / durch Kommas getrennte Werte
• text / csv
• Anwendung / CSV
• Anwendung / Excel
• application / vnd.ms-excel
• application / vnd.msexcel
• Text / beliebiger Text

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

Dies hat bei mir unter Safari 10 nicht funktioniert:

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

Ich musste stattdessen Folgendes schreiben:

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

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:

console.log($('.file-input')[0].files[0].type);

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:

for (var i = 0; i < $('.file-input')[0].files.length; i++){
    console.log($('.file-input')[0].files[i].type);
}

Das Akzeptieren von Attributen hat einige Probleme mit mehreren Attributen und funktioniert in diesem Fall nicht richtig.

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.

function checkFile(sender, validExts) {
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0 && fileExt != "") {
        alert("Invalid file selected, valid files are of " +
                 validExts.toString() + " types.");
        $(sender).val("");
        return false;
    }
    else return true;
}

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.

Jetzt können Sie das neue HTML5-Eingabevalidierungsattribut verwenden pattern=".+\.(xlsx|xls|csv)".