Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2024
    Messaggi
    15

    Caricare immagine di default se mancante in cartella immagini

    buona sera a tutti, partecipo per la prima volta in questo forum e vorrei chiedere il vostro aiuto per un problema che ad oggi non sono riuscito a venirne a capo e cioè:

    nel DatTables dipendenti c'è il campo foto, questo campo è valorizzato dal numero di matricola del dipendente più l'estensione png, quindi per esempio il dipendente con matricola 0932 avrà il campo foto valorizzato con 0932.png, consideriamo che la colonna non ha campi null ne vuoti perchè tutti i dipendenti hanno una matricola, questo campo foto si collega alla cartella "../img/dip/foto.png", quindi si carica le foto dei dipendenti e li mostra come miniature 50X50, ora la maggior parte dei dipendenti hanno la loro foto, ma alcuni non ancora, quindi quando dentro la cartella non si trova la foto restituisce nel campo la dicitura immagine del dipendente con l'icona dell'immagine mancante, ora siccome non è elegante da vederi avrei pensato di sfruttare un png che ha l'immagine di un omino grigio e al centro la dicitura no photo, ho già questa immagine nella cartella (NoPhopto.png) insieme alle altre foto dei dipendenti, quindi la mia idea era, che attraverso una funzione si controlla nella cartella se esiste la foto relativa al valore dell campo, quindi 0932.png , perchè le foto hanno la stessa denominazione del valore campo, se esiste la mostri nel campo della Datatables, altrimenti mostri nel campo inerente a quella matricola l'immagine NoPhoto.png
    ma ad oggi non sono riuscito, posto qui il codice di inizializzazione della tabella, sperando che qualcuno mi possa dare una mano.

    grazie anticipatamente a tutti in ogni caso

    codice:
    $(document).ready(function () {
        let badgeTable = null; // Variabile per mantenere il riferimento alla tabella dei badge
    
        // Inizializzazione della tabella dei dipendenti
        let table = $('#example').DataTable({
            select: true,
            lengthMenu: [5, 10],
            "ajax": {
                "url": "../php/dipendente1.php",
                "dataSrc": "data"
            },
            "order": [[1, 'asc']],
            "language": {
                "url": "../json/italiano.json"
            },
            "columns": [
                { "data": "iddip" },
                { "data": "matr" },
                { "data": "cognome" },
                { "data": "nome" },
                { "data": "nascita" },
                { "data": "matrcomune" },
                { "data": "assunzione" },
                { "data": "iniznomin" },
                { "data": "foto" },
                { "data": "stato" },
                { "data": "tot_badge" }
            ],
    
     "columnDefs": [
                {   
                    "targets": [0], // Indice della colonna da nascondere (0 per la prima colonna)
                    "visible": false, // Imposta la visibilità della colonna su falso
                    "searchable": false // Impedisce la ricerca sulla colonna
                },
                {   
                    "targets": 8, // Indice della colonna con il percorso dell'immagine
                    "render": function(data, type, row, meta) {
                        return '<img src="' + data + '" alt="Immagine dipendente" style="width:50px;height:50px;">';
                    }
                }
            ]
        });
    Questa è la parte in php dove ricavo l'array dei dipendenti.
    codice:
    <?php
    // Includi il file di connessione al database
    require_once('connessione.php');
    
    try {
        // Query per recuperare i dipendenti attivi con il totale dei badge associati
        $query = "
            SELECT 
                d.iddip, 
                d.matr, 
                d.cognome, 
                d.nome, 
                DATE_FORMAT(d.dnascita, '%d/%m/%Y') AS nascita, 
                d.matrcomune, 
                DATE_FORMAT(d.dassunzione, '%d/%m/%Y') AS assunzione, 
                d.iniznomin, 
                d.foto, 
                d.stato,
                COUNT(b.idbadge) AS tot_badge
            FROM 
                dipendente d
            LEFT JOIN 
                badge b ON d.iddip = b.iddip
            WHERE 
                d.stato ='ATTIVO'
            GROUP BY 
                d.iddip, 
                d.matr, 
                d.cognome, 
                d.nome, 
                d.dnascita, 
                d.matrcomune, 
                d.dassunzione, 
                d.iniznomin, 
                d.foto, 
                d.stato";
        
        // Prepara e esegui la query
        $statement = $pdo->prepare($query);
        $statement->execute();
    
        // Array per le righe dei dati
        $fetchdata = array('data' => array());
    
        // Ciclo attraverso i risultati per costruire le righe
        while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
            $fotoMiniatura = "../img/dip/" . $row['foto'];
        
            $fetchdata['data'][] = array(
                'iddip' => $row['iddip'],
                'matr' => $row['matr'],
                'cognome' => $row['cognome'],
                'nome' => $row['nome'],
                'nascita' => $row['nascita'],
                'matrcomune' => $row['matrcomune'],
                'assunzione' => $row['assunzione'],
                'iniznomin' => $row['iniznomin'],
                'foto' => $fotoMiniatura,
                'stato' => $row['stato'],
                'tot_badge' => $row['tot_badge'] // Totale dei badge associati
            );
        }
    
        // Restituzione dei dati come JSON
        echo json_encode($fetchdata, JSON_UNESCAPED_UNICODE);
    } catch (PDOException $e) {
        // Gestione degli errori
        echo json_encode(array('error' => 'Errore durante l\'esecuzione della query: ' . $e->getMessage()), JSON_UNESCAPED_UNICODE);
    }
    ?>


    fin qui sono riuscito a caricare le immagini nel campo foto , ma non riesco a gestire l'assegnazione dell'immagine di default quando la foto non esiste nella cartella
    Ultima modifica di diego966; 03-04-2024 a 21:57

  2. #2
    Nel campo foto devo aggiungere "onload" che chiamerá una funzione che controlla le dimensioni originali della foto tramite nativeWidth oppure nativeHeight
    Se le dimensioni ti indicano che la foto non c'è, allora ci carichi quella di default

    Non ti do sorgenti da copiare ed incollare.
    Ragionaci da solo.
    Io nella vita ho visto cose che voi astemi neanche potete immaginare.

  3. #3
    .. doppione
    Ultima modifica di SoloWiFi; 04-04-2024 a 09:17
    Io nella vita ho visto cose che voi astemi neanche potete immaginare.

  4. #4
    Utente di HTML.it
    Registrato dal
    Apr 2024
    Messaggi
    15
    grazie mille per il suggerimento, ed hai ragione, pappa pronta niente, devo arrivarci da solo, ti ringrazio ancora.
    buona giornata

  5. #5
    Utente di HTML.it
    Registrato dal
    Apr 2024
    Messaggi
    15
    Quote Originariamente inviata da SoloWiFi Visualizza il messaggio
    Nel campo foto devo aggiungere "onload" che chiamerá una funzione che controlla le dimensioni originali della foto tramite nativeWidth oppure nativeHeight
    Se le dimensioni ti indicano che la foto non c'è, allora ci carichi quella di default

    Non ti do sorgenti da copiare ed incollare.
    Ragionaci da solo.
    Ho cercato di applicare il tuo suggerimento,


    codice:
    $(document).ready(function () {
        let badgeTable = null; // Variabile per mantenere il riferimento alla tabella dei badge
    
        var img = new Image();
        img.onload = function() {
            // Controlla le dimensioni originali dell'immagine
            if (this.naturalWidth === 0 && this.naturalHeight === 0) {
                // Se le dimensioni indicano che l'immagine non esiste, carica l'immagine di default
                imgElement.src = "../img/dip/NoPhoto.png";
            }
        };
        img.src = imageUrl;
    
    
        // Inizializzazione della tabella dei dipendenti
        let table = $('#example').DataTable({
            select: true,
            select: {
                info: false
            },
            lengthMenu: [5, 10],
            "ajax": {
                "url": "../php/dipendente.php",
                "dataSrc": "data"
            },
            "order": [[1, 'asc']],
            "language": {
                "url": "../json/italiano.json"
            },
            "columns": [
                { "data": "iddip" },
                { "data": "matr" },
                { "data": "cognome" },
                { "data": "nome" },
                { "data": "nascita" },
                { "data": "matrcomune" },
                { "data": "assunzione" },
                { "data": "iniznomin" },
                { "data": "foto" },
                { "data": "stato" },
                { "data": "tot_badge" }
            ],
            "columnDefs": [
                {   
                    "targets": 8, // Indice della colonna con il percorso dell'immagine
                    "render": function(data, type, row, meta) {
                        if (data) {
                            // Crea un elemento immagine con l'URL specificato e l'evento onload
                            var imageHtml = '<img src="../img/dip/' + data + '" alt="Immagine dipendente" style="width:50px;height:50px;" onload="checkImageDimensions(this, \'../img/dip/' + data + '\');">';
                            
                            // Ritorna l'elemento immagine
                            return imageHtml;
                        } else {
                            // Se l'immagine non esiste, mostra l'immagine di default
                            return '<img src="../img/dip/NoPhoto.png" alt="Immagine di default" style="width:50px;height:50px;">';
                        }
                    }
                }
            ]
        });
    
    

    ma rimane tale e quale, di sicuro sbaglierò in qualcosa, ma sarebbe interessante capire dove sbaglio, perchè sono sicuro che il tuo suggerimento funziona, di contro devo dirti che non avevo pensato di risolvere la cosa lato php, piuttosto che lato script, in questo modo, con una if sul while:

    codice:
    $statement = $pdo->prepare($query);
    $statement->execute();
    
    // Array per le righe dei dati
    $fetchdata = array('data' => array());
    
    // Ciclo attraverso i risultati per costruire le righe
    while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
    $fotoMiniatura = "../img/dip/".$row['foto'];
    
    // Verifica se l'immagine specificata esiste nella cartella
    if (file_exists($fotoMiniatura)) {
    // Se esiste, utilizza l'immagine specificata
        } else {
    // Se non esiste, utilizza un'immagine di default
    $fotoMiniatura = "../img/dip/NoPhoto.png";
        }
    
    
    $fetchdata['data'][] = array(
    'iddip' => $row['iddip'],
    'matr' => $row['matr'],
    'cognome' => $row['cognome'],
    'nome' => $row['nome'],
    'nascita' => $row['nascita'],
    'matrcomune' => $row['matrcomune'],
    'assunzione' => $row['assunzione'],
    'iniznomin' => $row['iniznomin'],
    'foto' => $fotoMiniatura,
    'stato' => $row['stato'],
    'tot_badge' => $row['tot_badge'] // Totale dei badge associati
            );
        }
    
    in questo modo l'immagine di default NoPhoto.png viene caricata regolarmente.

    Grazie mille comunque, ma vorrei capire dove ho sbagliato, se avrai in po di pazienza per spiegarmelo
    Ultima modifica di diego966; 04-04-2024 a 12:47

  6. #6
    Lo devi risolvere in JavaScript.
    Io nella vita ho visto cose che voi astemi neanche potete immaginare.

  7. #7
    Utente di HTML.it
    Registrato dal
    Apr 2024
    Messaggi
    15
    Quote Originariamente inviata da SoloWiFi Visualizza il messaggio
    Lo devi risolvere in JavaScript.
    Ci sono riuscito !


    codice:
    $(document).ready(function () {
        let badgeTable = null; // Variabile per mantenere il riferimento alla tabella dei badge
    
        
    
        // Inizializzazione della tabella dei dipendenti
        let table = $('#example').DataTable({
            select: true,
            select: {
                info: false
            },
            lengthMenu: [5, 10],
            "ajax": {
                "url": "../php/dipendente.php",
                "dataSrc": "data"
            },
            "order": [[1, 'asc']],
            "language": {
                "url": "../json/italiano.json"
            },
            "columns": [
                { "data": "iddip" },
                { "data": "matr" },
                { "data": "cognome" },
                { "data": "nome" },
                { "data": "nascita" },
                { "data": "matrcomune" },
                { "data": "assunzione" },
                { "data": "iniznomin" },
                { "data": "foto" },
                { "data": "stato" },
                { "data": "tot_badge" }
            ],
            "columnDefs": [
                {   
                    "targets": [0], // Indice della colonna da nascondere (0 per la prima colonna)
                    "visible": false, // Imposta la visibilità della colonna su falso
                    "searchable": false // Impedisce la ricerca sulla colonna
                },
                {   
                    "targets": 8, // Indice della colonna con il percorso dell'immagine
                    "render": function(data, type, row, meta) {
                        return '<img src="' + data + '" alt="Immagine dipendente" style="width:60px;height:60px;">';
                    }
                }
            ]
        });
    
        // Controllo di tutte le immagini nella tabella dei dipendenti al caricamento della pagina
        $('#example').on('draw.dt', function () {
            $('#example').find('img').each(function() {
                checkImageExists(this);
            });
        });
    
        // Funzione per controllare se un'immagine esiste
        function checkImageExists(imgElement) {
            let img = new Image();
            img.src = imgElement.src;
            
            img.onload = function() {
                if (img.naturalWidth === 0 || img.naturalHeight === 0) {
                    // Se le dimensioni naturali dell'immagine sono 0, carica l'immagine di default
                    imgElement.src = "../img/dip/NoPhoto.png";
                }
            };
    
            img.onerror = function() {
                // Se si verifica un errore durante il caricamento dell'immagine, carica l'immagine di default
                imgElement.src = "../img/dip/NoPhoto.png";
            };
        }
    
    Immagine 2024-04-04 234044.jpg

    sbagliavo anche a posizionare il blocco di codice, dovevo farlo dopo l'inizializzazione della tabella dipendenti.

    Grazie !
    Ultima modifica di diego966; 05-04-2024 a 00:00

  8. #8
    bravo @diego966, non solo perché hai risolto, ma anche perché hai condiviso la soluzione! Grazie
    Ultima modifica di optime; 05-04-2024 a 09:31

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.