Input HTML = "file" Accetta il tipo di file di attributo (CSV)

Ho un oggetto di caricamento file sulla mia pagina:

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

con i seguenti file Excel sul mio desktop:

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

Voglio che il caricamento di file per SOLO mostrare .xlsx, .xls, e .csvfile.

Usando l' acceptattributo, ho scoperto che questi tipi di contenuto si sono occupati di .xlsx& .xlsestensioni ...

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

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

Tuttavia, non riesco a trovare il tipo di contenuto corretto per un file CSV di Excel! Eventuali suggerimenti?

ESEMPIO: http://jsfiddle.net/LzLcZ/

Bene, questo è imbarazzante ... Ho trovato la soluzione che stavo cercando e non potrebbe essere più semplice. Ho usato il seguente codice per ottenere il risultato desiderato. Spero che questo aiuti qualcuno in futuro. Grazie a tutti per il vostro aiuto.

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

Tipi di accettazione validi:

Per i file CSV (.csv), utilizzare:

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

Per i file Excel 97-2003 (.xls), utilizzare:

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

Per Excel File 2007+ (.xlsx), utilizzare:

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

Per i file di testo (.txt) utilizzare:

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

Per i file di immagine (.png / .jpg / ecc.), Utilizzare:

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

Per i file HTML (.htm, .html), utilizzare:

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

Per i file video (.avi, .mpg, .mpeg, .mp4), utilizzare:

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

Per i file audio (.mp3, .wav, ecc.), Utilizzare:

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

Per i file PDF , utilizzare:

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

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

NOTA:

Se si sta tentando di visualizzare i file CSV di Excel ( .csv), NON utilizzare:

• text/csv
• application/csv
• text/comma-separated-values( funziona solo in Opera ).

Se stai provando a visualizzare un particolare tipo di file (ad esempio, a WAVo PDF), questo funzionerà quasi sempre ...

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

In questi giorni puoi semplicemente usare l'estensione del file

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

Dom questo attributo è molto vecchio e non è accettato nei browser moderni per quanto ne so, ma ecco un'alternativa ad esso, Prova questo

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

Immagino che ti aiuterà ovviamente a cambiare questo script in base alle tue esigenze.

Ho usato text/comma-separated-valuesper CSV mime-type nell'attributo accetta e funziona bene in Opera. Ho provato text/csvsenza fortuna.

Alcuni altri tipi MIME per CSV se il suggerito non funziona:

• testo / valori separati da virgole
• text / csv
• application / csv
• application / excel
• application / vnd.ms-excel
• application / vnd.msexcel
• text / anytext

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

Questo non ha funzionato per me in Safari 10:

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

Ho dovuto scrivere questo invece:

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

Puoi conoscere il tipo di contenuto corretto per qualsiasi file semplicemente procedendo come segue:

1) Seleziona il file interessato,

2) Ed esegui in console questo:

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

Puoi anche impostare l'attributo "multiplo" per l'input per controllare il tipo di contenuto per più file contemporaneamente e procedere come segue:

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

L'accettazione degli attributi presenta alcuni problemi con più attributi e in questo caso non funziona correttamente.

Ho modificato la soluzione di @yogi. Inoltre, quando il file ha un formato errato, reimposto il valore dell'elemento di input.

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;
}

Ho un buildin di verifica personalizzato, perché nella finestra del file aperta l'utente può ancora scegliere le opzioni "Tutti i file ('*')", indipendentemente dal fatto che imposti esplicitamente l'attributo accetta nell'elemento di input.

Ora puoi utilizzare il nuovo attributo di convalida dell'input html5 pattern=".+\.(xlsx|xls|csv)".