Como fazer a entrada type = file Deve aceitar apenas pdf e xls

eu usei <input type= "file" name="Upload" >

Agora, gostaria de restringir isso aceitando apenas arquivos .pdf e .xls.

Quando clico no botão enviar, ele deve validar isso.

E quando eu clicar nos arquivos (PDF / XLS) na página da web, ele deve abrir automaticamente.

Alguém poderia dar alguns exemplos disso?

Você pode fazer isso usando o atributo accept e adicionando tipos MIME permitidos a ele. Mas nem todos os navegadores respeitam esse atributo e pode ser facilmente removido por meio de algum inspetor de código. Portanto, em qualquer caso, você precisa verificar o tipo de arquivo no lado do servidor (sua segunda pergunta).

Exemplo:

<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />

À sua terceira pergunta "E quando eu clicar nos arquivos (PDF / XLS) na página da web, ele deve abrir automaticamente.":

Você não pode conseguir isso. O modo como um PDF ou XLS é aberto na máquina cliente é definido pelo usuário.

você pode usar isto:

HTML

<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />

suporte apenas. PDF e. Arquivos XLS

Infelizmente, não há uma maneira garantida de fazer isso no momento da seleção.

Alguns navegadores oferecem suporte ao acceptatributo de inputtags. Este é um bom começo, mas não pode ser totalmente confiável.

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

Você pode usar um cfinpute executar uma validação para verificar a extensão do arquivo no envio, mas não o tipo MIME. Isso é melhor, mas ainda não é à prova de idiotas. Os arquivos no OSX geralmente não têm extensões de arquivo ou os usuários podem identificar os tipos de arquivo de forma mal-intencionada.

O ColdFusion cffilepode verificar o tipo mime usando a contentTypepropriedade do result ( cffile.contentType), mas isso só pode ser feito após o upload. Esta é sua melhor aposta, mas ainda não é 100% segura, pois os tipos MIME podem estar errados.

Você pode usar JavaScript. Leve em consideração que o grande problema em fazer isso com JavaScript é redefinir o arquivo de entrada. Bem, isso se restringe apenas a JPG (para PDF, você terá que alterar o tipo MIME e o número mágico ):

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

Leve em consideração que isso foi testado nas versões mais recentes do Firefox e do Chrome e no IExplore 10.

Para obter uma lista completa dos tipos de mime, consulte a Wikipedia .

Para uma lista completa de números mágicos, consulte a Wikipedia .

Eu filtraria os arquivos do lado do servidor, porque existem ferramentas, como Live HTTP Headers no Firefox que permitiriam fazer upload de qualquer arquivo, incluindo um shell. As pessoas podem hackear seu site. Faça isso no site do servidor, para ser seguro.

Embora este exemplo específico seja para um upload de vários arquivos, ele fornece as informações gerais necessárias:

https://developer.mozilla.org/en-US/docs/DOM/File.type

Quanto a atuar sobre um arquivo / download /, esta não é uma questão de Javascript - mas sim uma configuração de servidor. Se um usuário não tiver algo instalado para abrir arquivos PDF ou XLS, sua única opção será baixá-los.

Se você deseja que o controle de upload de arquivo limite os tipos de arquivos que o usuário pode fazer upload com um clique de botão, este é o caminho.

<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') : 
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>

Você pode então chamar a função de um evento como o onClick do botão acima, que se parece com:

onClick = "TestFileType (this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"

Você pode alterar isso para: PDFeXLS

Você pode ver isso implementado aqui: Demo