it-swarm.com.de

HTML Input = "file" Akzeptiere Attribut-Dateityp (CSV)

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

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

mit folgenden Excel-Dateien auf meinem Desktop:

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

Ich möchte, dass die Datei in NUR.xlsx, .xls, & .csv Dateien.

Mit dem accept -Attribut habe ich festgestellt, dass diese Inhaltstypen die .xlsx & .xls -Erweiterungen betreuen ...

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/

434
Dom

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 erzielen. Hoffe das hilft jemandem in der Zukunft. Vielen Dank für Ihre Hilfe.

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

Gültige Akzeptanzarten:

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" />

Für Textdateien (.txt) verwenden Sie:

<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" />

Verwenden Sie für Videodateien (.avi, .mpg, .mpeg, .mp4):

<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, tun Sie NOT verwenden:

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

Wenn Sie versuchen, einen bestimmten Dateityp anzuzeigen (z. B. WAV oder PDF), funktioniert dies fast immer ...

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

In diesen Tagen können Sie nur die Dateierweiterung verwenden

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

Dom dieses Attribut ist sehr alt und 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 hilft dir natürlich, wenn du dieses Skript nach deinen Wünschen änderst.

38
yogi

Ich habe text/comma-separated-values für CSV-MIME-Typ im Accept-Attribut verwendet und es funktioniert gut in Opera. Versuchte text/csv ohne Glück.

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

  • durch Text/Komma getrennte Werte
  • text/csv
  • anwendung/CSV
  • anwendung/Excel
  • anwendung/vnd.ms-Excel
  • anwendung/vnd.msexcel
  • text/anytext

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

11
jaysponsored

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" />
9
trojan

Sie können den richtigen Inhaltstyp für jede Datei ermitteln, indem Sie einfach die folgenden Schritte ausführen:

1) Interessierte Datei auswählen,

2) 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 festlegen, um den Inhaltstyp für mehrere Dateien gleichzeitig zu überprüfen.

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.

4
opiumind

Ich habe die Lösung von @yogi geändert. Der Zusatz ist, dass ich, wenn die Datei ein falsches Format hat, den Wert des Eingabeelements zurücksetze.

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 ein benutzerdefiniertes Überprüfungs-Build, da der Benutzer im geöffneten Dateifenster weiterhin die Optionen "Alle Dateien ('*')" auswählen kann, unabhängig davon, ob ich das accept-Attribut im Eingabeelement explizit festgelegt habe.

1
RenatoIvancic

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

0
iiic