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

501

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/

Dom
quelle
Die meisten Browser respektieren das Attribut accept nicht, da es verwendet werden kann, um Benutzer zu belästigen, die nicht auf die Übertragung vertraulicher Dateien achten.
Tletnes
9
@tletnes nicht wahr, es wird von den meisten großen Browsern unterstützt
Dom
Sie können dies auch versuchen, wenn ($ .trim ($ ('# OriginalFileName'). Val ())! = "") {Var ext = $ ('# OriginalFileName'). Val (). Split ('.') .pop (). toLowerCase (); if ($ .inArray (ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls']) == -1) {$ ('# OriginalFileNameValid'). html ('Use .doc , .docx, .pdf-Dateien '); }}
Nithin Paul
Für den Fall, dass andere Ubuntu-Benutzer dadurch verwirrt werden, habe ich festgestellt, dass Firefox in Ubuntu standardmäßig "Alle Dateien" anzeigt, aber dem Dropdown-Menü "Dateityp" im Dialogfeld "Dateiauswahl" das Attribut "Akzeptieren" hinzufügt.
mltsy

Antworten:

1247

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" />
Dom
quelle
3
Es scheint, dass Chrome dieses Attribut unterstützt, aber Firefox arbeitet noch daran. Sie können diesen Fehler abstimmen, damit er schneller behoben
Salvatorelab
3
@DavidRouten Das Attribut accept würde nur Dateitypen filtern. Sie müssten auch die Dateiüberprüfung verwenden, um zu verhindern, dass Benutzer andere Dateitypen auswählen. Ich hoffe, das hilft!
Dom
1
<input type = "file" accept = ". csv" /> funktioniert in Firefox nicht. Gibt es eine andere Lösung, die in Firefox funktioniert?
Ganesa Vijayakumar
1
<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.
Weihnachten
1
Können Sie ein Beispiel für eine "XML" -Datei hinzufügen? Es wird hilfreich sein. Danke im Voraus.
Ni8mr
161

Heutzutage können Sie einfach die Dateierweiterung verwenden

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>
Großes Geld
quelle
3
Obwohl erstaunlich diese (und die Alternative 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/...
SharpC
38

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.

Yogi
quelle
5
Coole Problemumgehung, aber ich verstehe nicht, warum ein solches Attribut als "alt" angesehen wird. Dies ist eine grundlegende Dateiauswahlfunktion auf fast jedem Betriebssystem. Die Browser sollten ihr Bestes geben, damit es funktioniert, und es würde vielen Benutzern helfen ...
Christophe Roussy
1
Das Attribut accept ist nicht alt und wird in den wichtigsten Browsern mit Ausnahme von IE / Edge unterstützt: caniuse.com/#feat=input-file-accept . Bitte formulieren Sie Ihre Antwort neu, da sie falsch ist.
Thomaux
2
Der wichtigste Aspekt des acceptAttributs 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.
Coderer
13

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

jaysponsored
quelle
1
Hallo Dom! Ich möchte mich entschuldigen, weil Ihre Antwort (als rechts markiert) in Ordnung ist und ich vorher nicht viel Aufmerksamkeit darauf habe, weil ich die Site nur in Opera getestet habe. Nach dem Testen in anderen Browsern sehe ich, dass Ihre Antwort vollständiger ist. Es funktioniert jedoch nicht in allen Browsern. Firefox 17 unterstützt nicht, wie ein Filter im Dateidialog ( bugzilla.mozilla.org/show_bug.cgi?id=83749#c14 ) akzeptiert wird , daher ist diese Eigenschaft für mich spannend. Ich werde ohnehin die Validierung von Javascript-Dateien verwenden, aber text / csv in accept attr verwenden, da dies die Standardeinstellung von IANA iana.org/assignments/media-types ist
jaysponsored
11

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" />
Trojaner
quelle
Hii ,,, es funktioniert auch gut auf meiner Safari. Aber wie, wenn wir Excel-Dokumente akzeptieren wollen? Hast du eine Ahnung? @ Trojan
Gustav
Überprüfen Sie die Antwort von Big Money. TLDR; <input type = "file" ID = "fileSelect" accept = ". xlsx, .xls, .csv" />
Sk. Irfan
4

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.

Olga Lisovskaya
quelle
1

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.

RenatoIvancic
quelle
0

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

iiic
quelle
10
Nach MDN , In 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.
Dom