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

501

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/

Dom
fonte
a maioria dos navegadores não respeita o atributo de aceitação, pois ele pode ser usado para encorajar usuários que não estão prestando atenção na transmissão de arquivos confidenciais.
tletnes
9
@tletnes não é verdade, é apoiada pela maioria dos principais navegadores
Dom
Você também pode tentar isso se ($ .trim ($ ('# OriginalFileName'). Val ())! = "") {Var ext = $ ('# OriginalFileName'). Val (). Split ('.') .pop (). toLowerCase (); if ($ .inArray (ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls'])) == -1) {$ ('# OriginalFileNameValid'). html ('Use .doc , .docx, arquivos .pdf '); }}
Nithin Paul
Caso qualquer outro usuário do Ubuntu fique confuso com isso, descobri que, no Ubuntu, o Firefox é o padrão para mostrar "Todos os arquivos", mas adiciona qualquer que seja o seu atributo "accept" ao menu suspenso do tipo de arquivo na caixa de diálogo de seleção de arquivo.
mltsy

Respostas:

1248

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" />
Dom
fonte
3
Parece que o Chrome suporta esse atributo, mas o Firefox ainda está trabalhando nele. Você pode votar este bug para que eles irão resolvê-lo mais rápido: bugzilla.mozilla.org/show_bug.cgi?id=826176
Salvatorelab
3
@DavidRouten, o atributo accept apenas filtraria os tipos de arquivo. Você precisaria usar a validação de arquivo também para impedir que os usuários selecionassem outros tipos de arquivo. Espero que ajude!
Dom
1
<input type = "file" accept = ". csv" /> não funciona no Firefox. Existe alguma outra solução para fazer como funciona isso no Firefox.
Ganesa Vijayakumar
1
<input type="file" accept=".csv, text/csv" />trabalhou para mim no firefox, chrome e opera no mac. somente .csv não funcionou em todos os navegadores.
tmas 15/02
1
Você pode adicionar um exemplo para o arquivo "xml"? Isso será útil. Desde já, obrigado.
Ni8mr 20/09/16
161

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

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>
Muito dinheiro
fonte
3
Embora surpreendentemente isso (e a alternativa application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel) ainda não pareça funcionar no Edge 41.16299.820.0 stackoverflow.com/questions/31875617/… wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…
SharpC
38

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.

iogue
fonte
5
Solução legal, mas não entendo por que esse atributo é considerado "antigo". Esta é uma característica básica de seleção de arquivos em quase todos os sistemas operacionais, navegadores devem fazer o seu melhor para fazê-lo funcionar e ele iria ajudar muitos usuários ...
Christophe Roussy
1
O atributo de aceitação não é antigo e é suportado nos principais navegadores, exceto no IE / Edge: caniuse.com/#feat=input-file-accept . Reformule sua resposta, pois ela é enganosa.
Thomaux 14/09/16
2
O aspecto mais importante do acceptatributo é a dica que ele fornece para a caixa de diálogo de arquivo aberto. O usuário deve receber arquivos correspondentes por padrão, presumivelmente com a opção de selecionar outros tipos, se desejar - é assim que os navegadores modernos se comportam agora.
Coderer
13

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

jaysponsored
fonte
1
Oi Dom! Quero pedir desculpas, porque sua resposta (marcada como correta) está correta e não tenho muita atenção antes porque estava testando o site apenas no Opera. Depois de testar em outros navegadores, vejo que você responde mais completo. Mas isso não funciona em todos os navegadores. O Firefox 17 não suporta Accept attr como um filtro na caixa de diálogo File ( bugzilla.mozilla.org/show_bug.cgi?id=83749#c14 ), portanto, essa propriedade é suspensa para mim. Vou usar a validação de arquivos javascript de qualquer maneira, mas o uso de texto / CSV em aceitar attr porque é o padrão da IANA iana.org/assignments/media-types
jaysponsored
11

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" />
trojan
fonte
Oi, está funcionando bem no meu safari também. Mas como se queremos aceitar documentos do Excel? Você tem alguma pista ? @trojan
gustav
Verifique a resposta do Big Money. TLDR; <input type = "file" ID = "fileSelect" accept = ". xlsx, .xls, .csv" />
Sk. Irfan
4

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.

Olga Lisovskaya
fonte
1

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.

RenatoIvancic
fonte
0

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

iiic
fonte
10
De acordo com o MDN , This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.Em relação à entrada de arquivo, eles vão dizerfile: 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