Subir múltiples imágenes con PDO. En este artículo, realizaremos un ejemplo para subir múltiples imágenes a la base de datos MySQL usando PDO-PHP y las imágenes subidas las mostraremos en la página web.
En un ejemplo anterior solo vimos como subir múltiples imágenes al servidor, pero ahora haremos un ejemplo más amplio, incorporando la opción de subir a una base de datos.
¿Cómo subir imágenes múltiples al servidor y MySQL?
- Tabla MySQL.- Se puede realizar creando una tabla MySQL y una columna tipo varchar para subir el nombre de la imagen.
- Crear carpeta.- Es vital crear una carpeta en su proyecto en la que se almacenará su imagen sida a través del formulario.
- Usando PDO.- Para un óptimo desarrollo es conveniente usar PDO para tener la seguridad en la conexión con MySQL y usando estrategias de seguridad.
- Formulario.- Para poder subir imágenes al servidor es necesario crear un formulario y que obligatoriamente contenga el atributo
enctype='multipart/form-data'. Debiendo quedar así [<form method='post' action='' enctype='multipart/form-data'>].
Subir múltiples imágenes con PDO PHP
A continuación, veremos varios pasos para lograr el objetivo del artículo.
1. Estructura de la tabla MySQL:
Es necesario crear una tabla en la base de datos para guardar los nombres de las imágenes. Por lo tanto, las siguientes son las consultas SQL para crear una tabla donde el nombre de la base de datos será «e_uploadpdo» y el nombre de la tabla es «imagenes«.
CREATE TABLE `imagenes` ( `id` int(11) NOT NULL, `nombre` varchar(120) COLLATE utf8mb4_unicode_ci NOT NULL, `image` varchar(120) COLLATE utf8mb4_unicode_ci NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; ALTER TABLE `imagenes` ADD PRIMARY KEY (`id`); ALTER TABLE `imagenes` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
2. Configuración de Conexión a MySQL
Para que el script funcione se debe de conectar a MySQL usando el lenguaje de programación PHP, en este ejemplo usaremos PDO porque es más seguro y robusto.
Código PHP:
Crearemos un archivo PHP llamado «conexion.php» y contendrá las variables y tipo de conexión hacia la base de datos.
Si observan el script, la variable de conexión es «$conn» y será requerida para la consulta de insertar los nombres de las imágenes en MySQL a través de la sentencia INSERT INTO que permite insertar registros a MySQL.
<?php
$server = "localhost";
$username = "root";
$password = "root";
$dbname = "e_uploadpdo";
try {
$conn = new PDO(
"mysql:host=$server;dbname=$dbname","$username","$password");
$conn->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e) {
die('No se puede conectar a MySQL');
}
?> 3.HTML y archivos PHP:
index.php: A continuación, mostraremos este fichero, que en su estructura HTML mostrara el formulario encargado de cargar las imágenes hacia el servidor y también hacia la base de datos con PHP.
Este fichero además del formulario posee una instrucción PHP que se ejecuta al presionar el botón «cargar imagen» del formulario. Sin embargo, este botón tiene como nombre «submit» en el cual a través de una condicional IF procesara las imágenes, de acuerdo a la siguiente lista:
- Contará la cantidad de imágenes
- Preparada de la consulta SQL
- Generamos el bucle de todos los archivos
- Extraemos en variable el nombre de archivo
- Designamos la carpeta de subida
- Obtenemos la extensión del archivo
- Validamos la extensión de la imagen
- Subimos la imagen al servidor
- Ejecutamos la consulta SQL
<?php
//Incluimos el fichero de conexión a MySQL
require "conexion.php";
if(isset($_POST['submit'])) {
// Contamos la cantidad de imagenes
$countfiles = count($_FILES['files']['name']);
// Declaración preparada de la consulta SQL
$query = "INSERT INTO imagenes (nombre,image) VALUES(?,?)";
$statement = $conn->prepare($query);
// Generamos el bucle de todos los archivos
for($i = 0; $i < $countfiles; $i++) {
// Extraemos en variable el nombre de archivo
$filename = $_FILES['files']['name'][$i];
// Designamos la carpeta de subida
$target_file = 'subidas/'.$filename;
// Obtenemos la extension del archivo
$file_extension = pathinfo($target_file, PATHINFO_EXTENSION);
$file_extension = strtolower($file_extension);
// Validamos la extensión de la imagen
$valid_extension = array("png","jpeg","jpg");
if(in_array($file_extension, $valid_extension)) {
// Subimos la imagen al servidor
if(move_uploaded_file(
$_FILES['files']['tmp_name'][$i],
$target_file)
) {
// Ejecutamos la consulta SQL
$statement->execute(
array($filename,$target_file));
}
}
}
$respuesta = "Carga de archivos correctamente";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Cargar imagen con PHP PDO</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" >
</head>
<body>
<div class="container"> <br>
<div class="alert alert-primary" role="alert">
<h4>Cargar imagen con PHP PDO</h4>
</div>
<?php
if(isset($respuesta)){
echo ' <div class="alert alert-success" role="alert"> '.$respuesta.'</div>';
}?>
<div class="card">
<div class="card-header"> Subir imagenes </div>
<div class="card-body">
<form method='post' action='' enctype='multipart/form-data'>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text" id="inputGroupFileAddon01">Cargar</span> </div>
<div class="custom-file">
<input type='file' class="custom-file-input" id="inputGroupFile01" name='files[]' multiple />
<label class="custom-file-label" for="inputGroupFile01">Seleccione...</label>
</div>
</div>
<input class="btn btn-primary" type='submit' value='Cargar Imagen' name='submit' />
<a href="ver.php" class="btn btn-success">Ver imagenes</a>
</form>
</div>
</div>
</div>
</body>
</html> 4. VISUALIZAR ARCHIVOS CARGADOS
ver.php: El siguiente archivo contendrá en su primera línea un fichero de conexión a MySQL y luego ejecutaremos una consulta usando PDO para obtener los registros de la tabla «imagenes«. Además, usaremos el ciclo FOREACH para devolver todos los registros que contiene dicha tabla.
Recordemos que la información devuelta de la base de datos solo será los nombres de las imágenes y tendremos que agregar la etiqueta IMG más la carpeta donde se subió las imágenes, en este ejemplo seria la carpeta «SUBIDAS«.
Al ingresar al fichero ver.php mostrara las imágenes que están registradas en MySQL.
Ejemplo de visualización de imagen.
<img class="img-thumbnail" src="./subidas/<?=$imagen['nombre']?>" title="<?=$imagen['nombre'] ?>" width='200' height='200'>
Archivo completo de visualizar las imagenes
<?php
require "conexion.php";
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cargar imagen con PHP PDO</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" >
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header"> Lista de imagenes </div>
<div class="card-body">
<?php
$stmt = $conn->prepare('select * from imagenes');
$stmt->execute();
$lista_imagenes = $stmt->fetchAll();
foreach($lista_imagenes as $imagen) {
?>
<img class="img-thumbnail" src="./subidas/<?=$imagen['nombre']?>" title="<?=$imagen['nombre'] ?>" width='200' height='200'>
<?php
}
?>
</div>
</div>
</div>
</body>
</html>
5. Procedemos a ejecutar el script:
Los pasos que tenemos que realizar son los siguientes:
- Ejecute el servidor local o servidor de producción y redirija a su página al index.php.
- Elija una imagen o varias imágenes para cargar en el formulario.
- Haga clic en el botón «Cargar imagen» para cargar la imagen a la base de datos y al servidor.
- Luego hacer clic en el enlace «V
er imágenes» para verificar el o los archivos cargados.
Conclusión
En este artículo hemos aprendido a carga una o varias imágenes al servidor y también a MySQL usando PDO. Por lo tanto, no es complicado realizar esta tarea si nos apoyamos con ciclos que posee PHP como ser el ciclo FOR o Ciclo FOREACH.
Además, en el ejemplo hemos incorporado el Framework Booststrap 4.6 para darle una apariencia profesional a nuestro ejemplo. Recordemos que esta librería solo se declara en la etiqueta HEAD y luego solo usamos sus clases en nuestras etiquetas HTML.
Descargar
