Jak podano w innych odpowiedziach, możesz sprawdzić typ mime, sprawdzając sygnaturę pliku w pierwszych bajtach pliku.

Ale inne odpowiedzi toŁadowanie całego pliku do pamięci w celu sprawdzenia podpisu, co jest bardzo marnotrawne i może łatwo zamrozić przeglądarkę, jeśli przypadkowo wybierzesz duży plik.

/**
 * 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>

Jeśli chcesz tylko sprawdzić, czy przesłany plik jest obrazem, możesz po prostu spróbować załadować go do <img> Oznacz sprawdzenie, czy nie występują błędy wywołania zwrotnego.

Przykład:

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

Jak twierdzi Drake, można to zrobić za pomocą FileReader. To, co tutaj prezentuję, jest jednak wersją funkcjonalną. Weź pod uwagę, że dużym problemem z robieniem tego z JavaScript jest zresetowanie pliku wejściowego. Cóż, to ogranicza się tylko do JPG (dla innych formatów będziesz musiał zmienić typ MIME i magiczną liczbę ):

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

Weź pod uwagę, że zostało to przetestowane na najnowszych wersjach Firefoksa i Chrome oraz na IExplore 10.

Na pełna lista typów mime znajduje się w Wikipedii .

Pełna lista liczb magicznych znajduje się w Wikipedii .

Krótka odpowiedź brzmi nie.

Jak zauważysz przeglądarki czerpią type z rozszerzenia pliku. Mac preview wydaje się również uruchamiać rozszerzenie. Zakładam, że jego szybsze odczytywanie nazwy pliku zawartej w wskaźniku, niż szukanie i odczytywanie pliku na dysku.

Zrobiłem kopię jpg zmienioną na png.

Udało mi się konsekwentnie pobrać następujące obrazy z obu obrazów w chrome (powinno działać w nowoczesnych przeglądarkach).

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

Które ty może wyrwać strunę.indexOf ('jpeg') sprawdza typ obrazu.

Oto skrzypce do zbadania http://jsfiddle.net/bamboo/jkZ2v/1/

Dwuznaczny wiersz zapomniałem skomentować w przykładzie

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

• dzieli zakodowane dane img base64, pozostawiając na obrazku
• Base64 dekoduje obraz
• dopasowuje tylko pierwszą linię danych obrazu

Kod fiddle używa dekodera base64, który nie działa w IE9, znalazłem ładny przykład użycia skryptu VB działającego w IE http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html

Kod do załadowania obrazu został zaczerpnięty od Joela Vardy ' ego, który robi fajne płótno, zmieniając rozmiar po stronie klienta przed przesłaniem, co może być interesujące https://joelvardy.com/writing/javascript-image-upload

Oto rozszerzenie odpowiedzi Roberto14, które wykonuje następujące czynności:

TO POZWOLI TYLKO NA OBRAZY

Sprawdza, czy FileReader jest dostępny i wraca do sprawdzania rozszerzenia, czy nie jest dostępny.

Wyświetla komunikat o błędzie, jeśli nie obraz

Jeśli jest to obrazek ładuje podgląd

* * nadal powinieneś wykonywać walidację po stronie serwera, jest to wygoda dla użytkownika końcowego niż cokolwiek innego. Ale to jest przydatne!

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

This is what you have to do

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

Jeśli chcesz sprawdzić typy plików obrazów to

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