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

Schreiben Sie einfach die Erweiterungen, die Sie akzeptieren wollen, kommagetrennt in die Aktion atr in der out

<input type="file" accept=".any, .ext, .you, .want">

Answer 2

Neben der Top-Antwort werden z. B. CSV-Dateien unter macOS als text/plain gemeldet, unter Windows jedoch als application/vnd.ms-excel. Also benutze ich dies:

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

Answer 3

Nach meinem Test, auf macOS 10.15.7 Catalina, kann die Antwort von Dom / Rikin Patel die [.xlsx] Datei nicht normal erkennen.

Ich persönlich habe die Praxis der meisten der vorhandenen Antworten zusammengefasst und persönliche Tests bestanden. Fassen Sie die folgenden Antworten zusammen:

accept=".csv, .xls, .xlsx, text/csv, application/csv,
text/comma-separated-values, application/csv, application/excel,
application/vnd.msexcel, text/anytext, application/vnd. ms-excel,
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

Answer 4

Sie können den korrekten Inhaltstyp für jede Datei ermitteln, indem Sie einfach Folgendes tun:

1) Wählen Sie die gewünschte Datei aus,

2) Und führen Sie in der Konsole Folgendes aus:

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

Sie können auch das Attribut "multiple" für Ihre Eingabe setzen, um den Content-Type für mehrere Dateien gleichzeitig zu prüfen und den nächsten Schritt zu tun:

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

Attribut accept hat einige Probleme mit mehreren Attributen und funktioniert in diesem Fall nicht korrekt.

Answer 5

Ich habe die Lösung von @yogi geändert. Der Zusatz ist, dass ich den Wert des Eingabeelements 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 Verifizierung eingebaut, denn im Fenster "Datei öffnen" kann der Benutzer immer noch die Optionen auswählen "All files ('*')" unabhängig davon, ob ich das Attribut accept im input-Element explizit gesetzt habe.