如何修改PHP+MySQL多图上传代码？表单嵌入中间怎么做？

Passo 1: Aggiornare la Tabella MySQL #

Prima di tutto, assicurati che la tabella soluzioni disponga di colonne per le 6 immagini. Se non esistono, esegui questa query SQL:

ALTER TABLE soluzioni 
ADD COLUMN foto2 VARCHAR(255), 
ADD COLUMN foto3 VARCHAR(255), 
ADD COLUMN foto4 VARCHAR(255), 
ADD COLUMN foto5 VARCHAR(255), 
ADD COLUMN foto6 VARCHAR(255);

Passo 2: Unire il Form di Upload e il Form Testuale #

Combina i due form in uno solo (con enctype="multipart/form-data" per gestire i file) e inserisci i campi di upload dove preferisci nel mezzo dei campi testuali. Ecco un esempio con anteprime immagini:

<div>
  <form method="post" enctype="multipart/form-data" target="_self">
    <!-- Campi testuali iniziali -->
    <div>
      <label>Titolo:</label>
      <input type="text" name="titolo" required>
    </div>
    <div>
      <label>Sottotitolo:</label>
      <input type="text" name="sottotitolo" required>
    </div>

    <!-- Sezione upload immagini inserita nel mezzo -->
    <div style="margin: 20px 0;">
      <h3>Carica fino a 6 Immagini</h3>
      <div>
        <input type="file" name="foto[]" accept="image/*" onchange="loadFile(event, 1)">
        <img id="preview1" style="max-width: 100px; max-height: 100px; margin-left: 10px;">
      </div>
      <div>
        <input type="file" name="foto[]" accept="image/*" onchange="loadFile(event, 2)">
        <img id="preview2" style="max-width: 100px; max-height: 100px; margin-left: 10px;">
      </div>
      <div>
        <input type="file" name="foto[]" accept="image/*" onchange="loadFile(event, 3)">
        <img id="preview3" style="max-width: 100px; max-height: 100px; margin-left: 10px;">
      </div>
      <div>
        <input type="file" name="foto[]" accept="image/*" onchange="loadFile(event, 4)">
        <img id="preview4" style="max-width: 100px; max-height: 100px; margin-left: 10px;">
      </div>
      <div>
        <input type="file" name="foto[]" accept="image/*" onchange="loadFile(event, 5)">
        <img id="preview5" style="max-width: 100px; max-height: 100px; margin-left: 10px;">
      </div>
      <div>
        <input type="file" name="foto[]" accept="image/*" onchange="loadFile(event, 6)">
        <img id="preview6" style="max-width: 100px; max-height: 100px; margin-left: 10px;">
      </div>
    </div>

    <!-- Campi testuali finali -->
    <div>
      <label>Testo 1:</label>
      <textarea name="testo1" required rows="5"></textarea>
    </div>
    <div>
      <label>Testo 2:</label>
      <textarea name="testo2" required rows="5"></textarea>
    </div>
    <div>
      <label>Sottocategoria:</label>
      <input type="text" name="sottocategoria" required>
    </div>

    <!-- Pulsante di invio -->
    <div style="margin-top: 20px;">
      <input type="submit" name="aggiungi" value="AGGIUNGI E CARICA IMMAGINI">
    </div>
  </form>
  <?php if(isset($error)) echo '<p style="color: red;">' . $error . '</p>'; ?>
</div>

<script>
// Funzione per l'anteprima delle immagini
function loadFile(event, index) {
    const preview = document.getElementById('preview' + index);
    preview.src = URL.createObjectURL(event.target.files[0]);
    preview.onload = () => URL.revokeObjectURL(preview.src); // Libera memoria
}
</script>

Passo 3: Codice PHP Combinato (Upload + Inserimento nel Database) #

Sostituisci il tuo codice di gestione MySQL con questo, che gestisce sia l'upload delle 6 immagini che l'inserimento nel database in modo sicuro:

<?php 
include("../Connections/connect.php"); 

$error = "";

if (isset($_POST['aggiungi'])) {
    // Array per memorizzare i nomi dei file delle immagini
    $foto_nomi = array_fill(0, 6, null);
    $cartella_upload = 'images/';
    $dimensione_target = 1000; // Dimensione massima per larghezza/altezza

    // Gestisci ogni file caricato
    if(isset($_FILES['foto']) && !empty($_FILES['foto']['tmp_name'][0])) {
        foreach($_FILES['foto']['tmp_name'] as $indice => $tmp_nome) {
            // Salta se non è stato caricato un file per questo campo
            if($_FILES['foto']['error'][$indice] !== UPLOAD_ERR_OK) continue;

            $nome_file = basename($_FILES['foto']['name'][$indice]);
            $percorso_file = $cartella_upload . $nome_file;

            // Sposta il file nella cartella di destinazione
            if(move_uploaded_file($tmp_nome, $percorso_file)) {
                // Ottieni l'estensione del file
                $estensione = strtolower(pathinfo($percorso_file, PATHINFO_EXTENSION));
                
                // Ottieni dimensioni originali
                list($larghezza_originale, $altezza_originale) = getimagesize($percorso_file);
                $rapporto = $larghezza_originale / $altezza_originale;

                // Calcola nuove dimensioni mantenendo il rapporto
                $larghezza = $dimensione_target;
                $altezza = $dimensione_target;

                if ($larghezza / $altezza > $rapporto) {
                    $larghezza = $altezza * $rapporto;
                } else {
                    $altezza = $larghezza / $rapporto;
                }

                // Crea immagine ridotta
                $immagine_ridotta = imagecreatetruecolor($larghezza, $altezza);

                switch($estensione) {
                    case 'jpg':
                    case 'jpeg':
                        $immagine_originale = imagecreatefromjpeg($percorso_file);
                        imagecopyresized($immagine_ridotta, $immagine_originale, 0, 0, 0, 0, $larghezza, $altezza, $larghezza_originale, $altezza_originale);
                        imagejpeg($immagine_ridotta, $percorso_file, 75);
                        break;
                    case 'png':
                        $immagine_originale = imagecreatefrompng($percorso_file);
                        imagecopyresized($immagine_ridotta, $immagine_originale, 0, 0, 0, 0, $larghezza, $altezza, $larghezza_originale, $altezza_originale);
                        imagepng($immagine_ridotta, $percorso_file);
                        break;
                }

                // Salva il nome del file nell'array
                $foto_nomi[$indice] = $nome_file;
            } else {
                $error .= "Errore nel caricamento dell'immagine " . ($indice + 1) . "<br>";
            }
        }
    }

    // Se non ci sono errori, inserisci nel database
    if(empty($error)) {
        // Prepared statement per evitare SQL injection
        $query = "INSERT INTO soluzioni 
                  (foto1, foto2, foto3, foto4, foto5, foto6, titolo, sottotitolo, testo1, testo2, sottocategoria) 
                  VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
        
        $stmt = $connessione->prepare($query);
        
        // Collega i parametri (s = stringa)
        $stmt->bind_param("sssssssssss", 
            $foto_nomi[0], $foto_nomi[1], $foto_nomi[2], 
            $foto_nomi[3], $foto_nomi[4], $foto_nomi[5],
            $_POST['titolo'], $_POST['sottotitolo'], $_POST['testo1'], 
            $_POST['testo2'], $_POST['sottocategoria']
        );

        if($stmt->execute()) {
            header("Location: index.php");
            exit();
        } else {
            $error = "Errore nell'inserimento: " . $stmt->error;
        }

        $stmt->close();
    }
}
?>

Note Importanti per la Sicurezza #

• Validazione File: Il codice controlla l'estensione, ma puoi aggiungere un controllo più stringente sui tipi MIME per evitare caricamenti di file pericolosi.
• Sanitizzazione Nomi File: Puoi modificare il nome del file per evitare caratteri speciali o path traversal (es. usare uniqid() per generare un nome unico).
• Permessi Cartella: Assicurati che la cartella images/ abbia i permessi corretti (es. 755) per permettere al server di scrivervi.
• Prepared Statement: Abbiamo sostituito la query diretta con prepared statement per prevenire SQL injection, un rischio grave nel codice originale.

内容的提问来源于stack exchange，提问作者ahmelg