Update immagini su database

[Dascos]

Lato client, cioè "sul browser", è possibile fare un check.
Ho trovato questo snippet di codice che dovrebbe fare ciò che cerchi, ma comunque il controllo finale dovresti farlo lato server, dove hai più controllo

/**
 * 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;
    });
};

Come HTML avrai qualcosa di questo genere

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

Testalo e poi apporta le opportune modifiche al codice di "onchange" per adattarsi alla tua logica

Riferimento: https://tiny.top/u/YRzO7HEh

[FioreFix]

Lato client, cioè "sul browser", è possibile fare un check.
Ho trovato questo snippet di codice che dovrebbe fare ciò che cerchi, ma comunque il controllo finale dovresti farlo lato server, dove hai più controllo

/**
 * 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;
    });
};

Come HTML avrai qualcosa di questo genere

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

Testalo e poi apporta le opportune modifiche al codice di "onchange" per adattarsi alla tua logica

Riferimento: https://tiny.top/u/YRzO7HEh

Innanzitutto grazie per l'aiuto e il tempo che mi dedicate.
Lato server non dovrei aver problemi grazie ai primi link suggeritomi.
Lato client, quel codice che mi hai postato non lo so leggere, che linguaggio è?
Io mastico solo HTML, PHP e MySQL, ho difficoltà pure col CSS, però a grandi linee lo utilizzo.
Ho cliccato pure sul link per provare a capire meglio, ma mi ritrovo un errore o qualcosa del genere e non riesco a leggere nulla di utile.

[Dascos]

Scusa...il link corretto è https://tiny.top/u/YRzO7HEh_11

E' codice javascript