Entrada HTML = "arquivo" Aceitar tipo de arquivo de atributo (CSV)

Eu tenho um objeto de upload de arquivo na minha página:

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

com os seguintes arquivos do Excel na minha área de trabalho:

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

Eu quero o upload do arquivo para somente mostrar .xlsx, .xls, e .csvarquivos.

Usando o acceptatributo, descobri que esses tipos de conteúdo cuidavam de .xlsx& .xlsextensões ...

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

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

No entanto, não consigo encontrar o tipo de conteúdo correto para um arquivo CSV do Excel! Alguma sugestão?

EXEMPLO: http://jsfiddle.net/LzLcZ/

Bem, isso é embaraçoso ... Encontrei a solução que procurava e não poderia ser mais simples. Usei o código a seguir para obter o resultado desejado. Espero que isso ajude alguém no futuro. Obrigado a todos por sua ajuda.

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

Tipos de aceitação válidos:

Para arquivos CSV (.csv), use:

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

Para arquivos do Excel 97-2003 (.xls), use:

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

Para arquivos do Excel 2007+ (.xlsx), use:

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

Para arquivos de texto (.txt), use:

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

Para arquivos de imagem (.png / .jpg / etc), use:

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

Para arquivos HTML (.htm, .html), use:

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

Para arquivos de vídeo (.avi, .mpg, .mpeg, .mp4), use:

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

Para arquivos de áudio (.mp3, .wav, etc), use:

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

Para arquivos PDF , use:

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

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

NOTA:

Se você estiver tentando exibir arquivos CSV do Excel ( .csv), NÃO use:

• text/csv
• application/csv
• text/comma-separated-values( funciona apenas no Opera ).

Se você estiver tentando exibir um tipo de arquivo específico (por exemplo, a WAVou PDF), isso quase sempre funcionará ...

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

Hoje em dia você pode apenas usar a extensão do arquivo

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

Dom este atributo é muito antigo e não é aceito em navegadores modernos, tanto quanto eu sei, mas aqui está uma alternativa a ele, tente isso

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

Eu acho que isso irá ajudá-lo, é claro, que você pode alterar esse script de acordo com suas necessidades.

Eu usei text/comma-separated-valuespara o tipo mime CSV no atributo accept e funciona bem no Opera. Tentei text/csvsem sorte.

Alguns outros tipos MIME para CSV se o sugerido não funcionar:

• valores separados por vírgula / texto
• text / csv
• application / csv
• application / excel
• application / vnd.ms-excel
• application / vnd.msexcel
• texto / qualquer texto

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

Isso não funcionou para mim no Safari 10:

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

Eu tive que escrever isso:

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

Você pode conhecer o tipo de conteúdo correto para qualquer arquivo, fazendo o seguinte:

1) Selecione o arquivo interessado,

2) E execute no console isso:

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

Você também pode definir o atributo "múltiplo" para sua entrada para verificar o tipo de conteúdo de vários arquivos por vez e fazer o seguinte:

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

A aceitação de atributo tem alguns problemas com vários atributos e não funciona corretamente neste caso.

Modifiquei a solução do @yogi. A adição é que, quando o arquivo está no formato incorreto, redefino o valor do elemento de entrada.

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

Eu tenho o buildin de verificação personalizado, porque na janela do arquivo aberto o usuário ainda pode escolher as opções "Todos os arquivos ('*')", independentemente de eu definir explicitamente o atributo de aceitação no elemento de entrada.

Agora você pode usar o novo atributo de validação de entrada html5 pattern=".+\.(xlsx|xls|csv)".