Update immagini su database

[FioreFix]

Salve,
spero di non sbagliare categoria, purtroppo o per fortuna l'HTML, il PHP ed il MySQL sono interconnessi.

Ho tutta una serie d'incognite su come caricare un'immagine o un qualsiasi file su un database, soprattutto vorrei partire mettendo dei filtri: estensione, risoluzione, dimensione.
Vorrei farlo subito alla radice nell'input, quindi nella pagina HTML, si può in modo semplice?

Vi chiedo cortesemente di delucidarmi un po' il tutto.
Grazie!

[Joe Taras]

Salve,
spero di non sbagliare categoria, purtroppo o per fortuna l'HTML, il PHP ed il MySQL sono interconnessi.

Ho tutta una serie d'incognite su come caricare un'immagine o un qualsiasi file su un database, soprattutto vorrei partire mettendo dei filtri: estensione, risoluzione, dimensione.
Vorrei farlo subito alla radice nell'input, quindi nella pagina HTML, si può in modo semplice?

Vi chiedo cortesemente di delucidarmi un po' il tutto.
Grazie!

Ciao,
la tua domanda è molto generica.

Ti posto questi due link su come PHP gestisce il caricamento dei file e delle immagini:

Link 1
Link 2

[FioreFix]

Ciao,
la tua domanda è molto generica.

Ti posto questi due link su come PHP gestisce il caricamento dei file e delle immagini:

Link 1
Link 2

Grazie, sei stato gentilissimo, viene spiegato chiaramente i vari passaggi.
La mia domanda è:
In entrambi i link che mi hai messo i controlli vengono fatti col PHP, non c'è un modo per bloccare già l'invio del form in HTML?
Per esempio l'uso di pattern, è possibile?
Se si come funziona per i file?

[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

[FioreFix]

Chiedo scusa se sono lento, ma il mio tempo è poco.
Ho provato, l'immagine nel database la carico (senza controlli), però in PhpMyAdmin mi trovo [BLOB - (dimensione)], se ci clicco mi fa scaricare un file .bin.
Questa cosa è normale vero?
Anche per le immagini che carico direttamente da PhpMyAdmin succede questo.

Mentre per caricarla in PHP come faccio?
Mi si riempie la pagina ci simboli e lettere, vi lascio il mio codice, se riuscite a correggermeli, grazie:

//Lettura dati dal database:
//$dbLink è la connessione
$sql0="SELECT * FROM `Images` ORDER BY `Name` ASC";
$result0=mysqli_query($dbLink, $sql0);
if($result0===false)
    {
    exit("Error query 0: ". mysqli_error($dbLink));
    }
while($row = mysqli_fetch_array($result0))
    {
    $ID=$row['ID'];
    $Name=$row['Name'];
    $Type=$row['Type'];
    $Image=$row['Image'];
    echo '<img src="'.$Image.'"></br>'; //Questa riga è il test per la sola immagine
    print("ID: $ID - Name: $Name - Type: $Type - Image: <img  src=$Image></br>"); //Questa invece tutto ma con sintassi  diversa
    } 

//Inserimento dati nel database:
$sql1="INSERT INTO `Images` (`Name`, `Type`, `Image`) VALUES ('$nome', '$categoria', '$immagine');";
$result1=mysqli_query($dbLink, $sql1);
if($result1===false)
    {
    exit("Error query 1: ".mysqli_error($dbLink));
    }
else
    {
    print("Update avvenuto con successo");
    } 

[FioreFix]

Chiedo scusa, non riesco a visualizzare queste immagini, cosa sbaglio?

[FioreFix]

Ci sono riuscito, grazie però a ChatGPT.
Grazie comunque per chi ha provato ad aiutarmi.