HTML Input="file" Accepteer Attribuut Bestandstype (CSV)

Ik heb een bestand upload object op mijn pagina:

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

met de volgende excel bestanden op mijn desktop:

  1. file1.xlsx
  2. bestand1.xls
  3. bestand.csv

Ik wil dat de upload van bestanden ONLY .xlsx, .xls, & .csv bestanden laat zien.

Met behulp van het accept attribuut, vond ik dat deze content-types zorgden voor .xlsx & .xls extensies...

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

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

Ik kan echter niet het juiste inhoudstype vinden voor een Excel CSV-bestand! Iemand suggesties?

VOORBEELD: <http://jsfiddle.net/LzLcZ/>

Stevoisiak
Bewerkte vraag 17de0 december 2018 в 7:26
Programmering
content-type csv file-upload html input
6de0 augustus 2012 в 5:18
9 views
Oplossing

Nou, dit is gênant... Ik vond de oplossing die ik zocht en het kon niet eenvoudiger zijn. Ik gebruikte de volgende code om het gewenste resultaat te krijgen. Hoop dat dit iemand in de toekomst helpt. Bedankt iedereen voor jullie hulp.

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

Geldige Accept Types:

Voor CSV bestanden (.csv), gebruik: 

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

Voor Excel-bestanden 97-2003 (.xls), gebruik: 

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

Voor Excel-bestanden 2007+ (.xlsx), gebruik: 

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

Voor Tekstbestanden (.txt) gebruikt u: 

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

Voor Afbeeldingsbestanden (.png/.jpg/etc), gebruik: 

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

Voor HTML-bestanden (.htm,.html), gebruik:

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

Voor Videobestanden (.avi, .mpg, .mpeg, .mp4), gebruik:

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

Voor Audio bestanden (.mp3, .wav, etc), gebruik:

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

Voor PDF-bestanden, gebruik:

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

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

NOOT:

Indien u Excel CSV bestanden (.csv) probeert weer te geven, gebruik dan NIET:

  • text/csv
  • applicatie/csv
  • text/comma-separated-values (werkt alleen in Opera).

Als je probeert een bepaald bestandstype weer te geven (bijvoorbeeld een WAV of PDF), dan zal dit bijna altijd werken...

 <input type="file" accept=".FILETYPE" />
Rikin Patel
Bewerkt antwoord 30ste2 maart 2016 в 5:15
Commentaren (23)

Dom dit attribuut is erg oud en wordt niet geaccepteerd in moderne browsers voor zover ik weet, Maar hier is een alternatief voor, Probeer dit

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

Ik denk dat het je zal helpen, natuurlijk kun je dit script aanpassen aan je behoeften.

Commentaren (3)

Ik heb text/comma-separated-values gebruikt voor CSV mime-type in accept attribute en het werkt prima in Opera. Ik heb text/csv geprobeerd zonder geluk.

Sommige andere MIME-Types voor CSV als de voorgestelde werken niet:

  • text/comma-separated-values
  • tekst/csv
  • toepassing/csv
  • toepassing/excel
  • toepassing/vnd.ms-excel
  • toepassing/vnd.msexcel
  • tekst/elke tekst

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

Gleb Kemarsky
Bewerkt antwoord 25ste6 juni 2017 в 1:59
Commentaren (2)