Eu li isso e estas perguntas que parecem sugerir que o tipo MIME do arquivo possa ser verificado usando javascript no lado do cliente. Agora, entendo que a validação real ainda precisa ser feita no servidor. Desejo executar uma verificação do lado do cliente para evitar desperdício desnecessário de recursos do servidor.

Para testar se isso pode ser feito no lado do cliente, alterei a extensão de um JPEGarquivo de teste para .pnge escolhi o arquivo para upload. Antes de enviar o arquivo, consulte o objeto de arquivo usando um console javascript:

document.getElementsByTagName('input')[0].files[0];

É isso que recebo no Chrome 28.0:

Arquivo {webkitRelativePath: "", lastModifiedDate: terça-feira, 16 de outubro de 2012, 10:00:00 GMT + 0000 (UTC), nome: "test.png", tipo: "image / png", tamanho: 500055…}

Ele mostra o tipo image/pngque parece indicar que a verificação é feita com base na extensão do arquivo em vez do tipo MIME. Eu tentei o Firefox 22.0 e me dá o mesmo resultado. Mas, de acordo com as especificações do W3C , o MIME Sniffing deve ser implementado.

Estou certo em dizer que não há como verificar o tipo MIME com javascript no momento? Ou eu estou esquecendo de alguma coisa?

Você pode determinar facilmente o tipo MIME do arquivo com JavaScript FileReaderantes de enviá-lo para um servidor. Concordo que devemos preferir a verificação do lado do servidor em vez do lado do cliente, mas a verificação do lado do cliente ainda é possível. Vou mostrar como e fornecer uma demonstração de trabalho na parte inferior.

Verifique se o seu navegador suporta ambos Filee Blob. Todos os principais deveriam.

if (window.FileReader && window.Blob) {
    // All the File APIs are supported.
} else {
    // File and Blob are not supported
}

Passo 1:

Você pode recuperar as Fileinformações de um <input>elemento como este ( ref ):

<input type="file" id="your-files" multiple>
<script>
var control = document.getElementById("your-files");
control.addEventListener("change", function(event) {
    // When the control has changed, there are new files
    var files = control.files,
    for (var i = 0; i < files.length; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }
}, false);
</script>

Aqui está uma versão do tipo arrastar e soltar acima ( ref ):

<div id="your-files"></div>
<script>
var target = document.getElementById("your-files");
target.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);

target.addEventListener("drop", function(event) {
    // Cancel default actions
    event.preventDefault();
    var files = event.dataTransfer.files,
    for (var i = 0; i < files.length; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }
}, false);
</script>

Passo 2:

Agora podemos inspecionar os arquivos e exibir cabeçalhos e tipos MIME.

✘ método rápido

Você pode, ingenuamente, solicitar ao Blob o tipo MIME de qualquer arquivo que ele represente usando este padrão:

var blob = files[i]; // See step 1 above
console.log(blob.type);

Para imagens, os tipos MIME retornam da seguinte forma:

image / jpeg
imagem / png
...

Advertência: O tipo MIME é detectado na extensão do arquivo e pode ser enganado ou falsificado. Pode-se renomear a .jpgpara a .pnge o tipo MIME será relatado como image/png.

✓ Método adequado de inspeção de cabeçalho

Para obter o tipo MIME genuíno de um arquivo do lado do cliente, podemos ir um pouco além e inspecionar os primeiros bytes do arquivo fornecido para comparar com os chamados números mágicos . Esteja avisado de que não é totalmente simples, porque, por exemplo, o JPEG possui alguns "números mágicos". Isso ocorre porque o formato evoluiu desde 1991. Você pode verificar apenas os dois primeiros bytes, mas prefiro verificar pelo menos 4 bytes para reduzir os falsos positivos.

Exemplo de assinaturas de arquivo JPEG (primeiros 4 bytes):

FF D8 FF E0 (SOI + ADD0)
FF D8 FF E1 (SOI + ADD1)
FF D8 FF E2 (SOI + ADD2)

Aqui está o código essencial para recuperar o cabeçalho do arquivo:

var blob = files[i]; // See step 1 above
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
  var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
  var header = "";
  for(var i = 0; i < arr.length; i++) {
     header += arr[i].toString(16);
  }
  console.log(header);

  // Check the file signature against known types

};
fileReader.readAsArrayBuffer(blob);

Você pode determinar o tipo MIME real da seguinte maneira (mais assinaturas de arquivo aqui e aqui ):

switch (header) {
    case "89504e47":
        type = "image/png";
        break;
    case "47494638":
        type = "image/gif";
        break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
    case "ffd8ffe3":
    case "ffd8ffe8":
        type = "image/jpeg";
        break;
    default:
        type = "unknown"; // Or you can use the blob.type as fallback
        break;
}

Aceite ou rejeite os uploads de arquivos como desejar, com base nos tipos MIME esperados.

Demo

Aqui está uma demonstração de trabalho para arquivos locais e arquivos remotos (eu tive que ignorar o CORS apenas para esta demonstração). Abra o trecho, execute-o e você verá três imagens remotas de diferentes tipos exibidas. Na parte superior, você pode selecionar uma imagem ou arquivo de dados local e a assinatura do arquivo e / ou o tipo MIME serão exibidos.

Observe que, mesmo que uma imagem seja renomeada, seu verdadeiro tipo MIME pode ser determinado. Ver abaixo.

Captura de tela

// Return the first few bytes of the file as a hex string
function getBLOBFileHeader(url, blob, callback) {
  var fileReader = new FileReader();
  fileReader.onloadend = function(e) {
    var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
    var header = "";
    for (var i = 0; i < arr.length; i++) {
      header += arr[i].toString(16);
    }
    callback(url, header);
  };
  fileReader.readAsArrayBuffer(blob);
}

function getRemoteFileHeader(url, callback) {
  var xhr = new XMLHttpRequest();
  // Bypass CORS for this demo - naughty, Drakes
  xhr.open('GET', '//cors-anywhere.herokuapp.com/' + url);
  xhr.responseType = "blob";
  xhr.onload = function() {
    callback(url, xhr.response);
  };
  xhr.onerror = function() {
    alert('A network error occurred!');
  };
  xhr.send();
}

function headerCallback(url, headerString) {
  printHeaderInfo(url, headerString);
}

function remoteCallback(url, blob) {
  printImage(blob);
  getBLOBFileHeader(url, blob, headerCallback);
}

function printImage(blob) {
  // Add this image to the document body for proof of GET success
  var fr = new FileReader();
  fr.onloadend = function() {
    $("hr").after($("<img>").attr("src", fr.result))
      .after($("<div>").text("Blob MIME type: " + blob.type));
  };
  fr.readAsDataURL(blob);
}

// Add more from http://en.wikipedia.org/wiki/List_of_file_signatures
function mimeType(headerString) {
  switch (headerString) {
    case "89504e47":
      type = "image/png";
      break;
    case "47494638":
      type = "image/gif";
      break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
      type = "image/jpeg";
      break;
    default:
      type = "unknown";
      break;
  }
  return type;
}

function printHeaderInfo(url, headerString) {
  $("hr").after($("<div>").text("Real MIME type: " + mimeType(headerString)))
    .after($("<div>").text("File header: 0x" + headerString))
    .after($("<div>").text(url));
}

/* Demo driver code */

var imageURLsArray = ["http://media2.giphy.com/media/8KrhxtEsrdhD2/giphy.gif", "http://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png", "http://static.giantbomb.com/uploads/scale_small/0/316/520157-apple_logo_dec07.jpg"];

// Check for FileReader support
if (window.FileReader && window.Blob) {
  // Load all the remote images from the urls array
  for (var i = 0; i < imageURLsArray.length; i++) {
    getRemoteFileHeader(imageURLsArray[i], remoteCallback);
  }

  /* Handle local files */
  $("input").on('change', function(event) {
    var file = event.target.files[0];
    if (file.size >= 2 * 1024 * 1024) {
      alert("File size must be at most 2MB");
      return;
    }
    remoteCallback(escape(file.name), file);
  });

} else {
  // File and Blob are not supported
  $("hr").after( $("<div>").text("It seems your browser doesn't support FileReader") );
} /* Drakes, 2015 */

img {
  max-height: 200px
}
div {
  height: 26px;
  font: Arial;
  font-size: 12pt
}
form {
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <input type="file" />
  <div>Choose an image to see its file signature.</div>
</form>
<hr/>

Conforme indicado em outras respostas, você pode verificar o tipo de mímica, verificando a assinatura do arquivo nos primeiros bytes do arquivo.

Mas o que outras respostas estão fazendo é carregar o arquivo inteiro na memória para verificar a assinatura, o que é muito inútil e pode congelar facilmente o navegador se você selecionar um arquivo grande por acidente ou não.

/**
 * Load the mime type based on the signature of the first bytes of the file
 * @param  {File}   file        A instance of File
 * @param  {Function} callback  Callback with the result
 * @author Victor www.vitim.us
 * @date   2017-03-23
 */
function loadMime(file, callback) {
    
    //List of known mimes
    var mimes = [
        {
            mime: 'image/jpeg',
            pattern: [0xFF, 0xD8, 0xFF],
            mask: [0xFF, 0xFF, 0xFF],
        },
        {
            mime: 'image/png',
            pattern: [0x89, 0x50, 0x4E, 0x47],
            mask: [0xFF, 0xFF, 0xFF, 0xFF],
        }
        // you can expand this list @see https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
    ];

    function check(bytes, mime) {
        for (var i = 0, l = mime.mask.length; i < l; ++i) {
            if ((bytes[i] & mime.mask[i]) - mime.pattern[i] !== 0) {
                return false;
            }
        }
        return true;
    }

    var blob = file.slice(0, 4); //read the first 4 bytes of the file

    var reader = new FileReader();
    reader.onloadend = function(e) {
        if (e.target.readyState === FileReader.DONE) {
            var bytes = new Uint8Array(e.target.result);

            for (var i=0, l = mimes.length; i<l; ++i) {
                if (check(bytes, mimes[i])) return callback("Mime: " + mimes[i].mime + " <br> Browser:" + file.type);
            }

            return callback("Mime: unknown <br> Browser:" + file.type);
        }
    };
    reader.readAsArrayBuffer(blob);
}


//when selecting a file on the input
fileInput.onchange = function() {
    loadMime(fileInput.files[0], function(mime) {

        //print the output to the screen
        output.innerHTML = mime;
    });
};

<input type="file" id="fileInput">
<div id="output"></div>

Para quem quer não implementar isso, o Sindresorhus criou um utilitário que funciona no navegador e possui os mapeamentos de cabeçalho para mimo para a maioria dos documentos que você deseja.

https://github.com/sindresorhus/file-type

Você pode combinar a sugestão do Vitim.us de apenas ler os primeiros X bytes para evitar carregar tudo na memória com o uso deste utilitário (exemplo em es6):

import fileType from 'file-type'; // or wherever you load the dependency

const blob = file.slice(0, fileType.minimumBytes);

const reader = new FileReader();
reader.onloadend = function(e) {
  if (e.target.readyState !== FileReader.DONE) {
    return;
  }

  const bytes = new Uint8Array(e.target.result);
  const { ext, mime } = fileType.fromBuffer(bytes);

  // ext is the desired extension and mime is the mimetype
};
reader.readAsArrayBuffer(blob);

Se você quiser apenas verificar se o arquivo enviado é uma imagem, tente carregá-lo na <img>tag e verifique se há retorno de chamada de erro.

Exemplo:

var input = document.getElementsByTagName('input')[0];
var reader = new FileReader();

reader.onload = function (e) {
    imageExists(e.target.result, function(exists){
        if (exists) {

            // Do something with the image file.. 

        } else {

            // different file format

        }
    });
};

reader.readAsDataURL(input.files[0]);


function imageExists(url, callback) {
    var img = new Image();
    img.onload = function() { callback(true); };
    img.onerror = function() { callback(false); };
    img.src = url;
}

Isto é o que você tem que fazer

var fileVariable =document.getElementsById('fileId').files[0];

Se você deseja verificar os tipos de arquivo de imagem,

if(fileVariable.type.match('image.*'))
{
 alert('its an image');
}

Aqui está uma implementação do TypeScript que suporta webp. Isso é baseado na resposta JavaScript do Vitim.us.

interface Mime {
  mime: string;
  pattern: (number | undefined)[];
}

// tslint:disable number-literal-format
// tslint:disable no-magic-numbers
const imageMimes: Mime[] = [
  {
    mime: 'image/png',
    pattern: [0x89, 0x50, 0x4e, 0x47]
  },
  {
    mime: 'image/jpeg',
    pattern: [0xff, 0xd8, 0xff]
  },
  {
    mime: 'image/gif',
    pattern: [0x47, 0x49, 0x46, 0x38]
  },
  {
    mime: 'image/webp',
    pattern: [0x52, 0x49, 0x46, 0x46, undefined, undefined, undefined, undefined, 0x57, 0x45, 0x42, 0x50, 0x56, 0x50],
  }
  // You can expand this list @see https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
];
// tslint:enable no-magic-numbers
// tslint:enable number-literal-format

function isMime(bytes: Uint8Array, mime: Mime): boolean {
  return mime.pattern.every((p, i) => !p || bytes[i] === p);
}

function validateImageMimeType(file: File, callback: (b: boolean) => void) {
  const numBytesNeeded = Math.max(...imageMimes.map(m => m.pattern.length));
  const blob = file.slice(0, numBytesNeeded); // Read the needed bytes of the file

  const fileReader = new FileReader();

  fileReader.onloadend = e => {
    if (!e || !fileReader.result) return;

    const bytes = new Uint8Array(fileReader.result as ArrayBuffer);

    const valid = imageMimes.some(mime => isMime(bytes, mime));

    callback(valid);
  };

  fileReader.readAsArrayBuffer(blob);
}

// When selecting a file on the input
fileInput.onchange = () => {
  const file = fileInput.files && fileInput.files[0];
  if (!file) return;

  validateImageMimeType(file, valid => {
    if (!valid) {
      alert('Not a valid image file.');
    }
  });
};

<input type="file" id="fileInput">

Como Drake afirma, isso pode ser feito com o FileReader. No entanto, o que apresento aqui é uma versão funcional. Leve em consideração que o grande problema de fazer isso com JavaScript é redefinir o arquivo de entrada. Bem, isso se restringe apenas ao JPG (para outros formatos, você precisará alterar o tipo de mímica 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 Chrome e no IExplore 10.

Para uma lista completa dos tipos de mímica, consulte Wikipedia .

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

Aqui está uma extensão da resposta de Roberto14 que faz o seguinte:

Isso só permitirá imagens

Verifica se o FileReader está disponível e volta para a extensão, verificando se não está disponível.

Dá um alerta de erro, se não uma imagem

Se for uma imagem, ele carrega uma visualização

** Você ainda deve fazer a validação no lado do servidor; isso é mais uma conveniência para o usuário final do que qualquer outra coisa. Mas é útil!

<form id="myform">
    <input type="file" id="myimage" onchange="readURL(this)" />
    <img id="preview" src="#" alt="Image Preview" />
</form>

<script>
function readURL(input) {
    if (window.FileReader && window.Blob) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image();
                img.onload = function() {
                    var preview = document.getElementById('preview');
                    preview.src = e.target.result;
                    };
                img.onerror = function() { 
                    alert('error');
                    input.value = '';
                    };
                img.src = e.target.result;
                }
            reader.readAsDataURL(input.files[0]);
            }
        }
    else {
        var ext = input.value.split('.');
        ext = ext[ext.length-1].toLowerCase();      
        var arrayExtensions = ['jpg' , 'jpeg', 'png', 'bmp', 'gif'];
        if (arrayExtensions.lastIndexOf(ext) == -1) {
            alert('error');
            input.value = '';
            }
        else {
            var preview = document.getElementById('preview');
            preview.setAttribute('alt', 'Browser does not support preview.');
            }
        }
    }
</script>

Resposta curta é não.

Como você observa, os navegadores derivam typeda extensão do arquivo. A pré-visualização do Mac também parece ficar sem a extensão. Estou assumindo que é porque é mais rápido ler o nome do arquivo contido no ponteiro, em vez de procurar e ler o arquivo no disco.

Fiz uma cópia de um jpg renomeado com png.

Consegui obter consistentemente o seguinte de ambas as imagens no chrome (deve funcionar em navegadores modernos).

ÿØÿàJFIFÿþ;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 90

Que você pode hackear uma verificação String.indexOf ('jpeg') para o tipo de imagem.

Aqui está um violino para explorar http://jsfiddle.net/bamboo/jkZ2v/1/

A linha ambígua que eu esqueci de comentar no exemplo

console.log( /^(.*)$/m.exec(window.atob( image.src.split(',')[1] )) );

• Divide os dados img codificados em base64, deixando na imagem
• Base64 decodifica a imagem
• Corresponde apenas à primeira linha dos dados da imagem

O código do violino usa a decodificação base64, que não funcionará no IE9, encontrei um bom exemplo usando o script VB que funciona no IE http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html

O código para carregar a imagem foi tirado de Joel Vardy, que está redimensionando a tela da imagem antes de fazer o upload, o que pode ser interessante https://joelvardy.com/writing/javascript-image-upload