Cargar múltiples archivos o imágenes con PHP y MySQL

Cargar múltiples archivos o imágenes con PHP y MySQL
Cargar múltiples archivos o imágenes con PHP y MySQL
  • Versión
  • Descargar 1025
  • Tamaño del archivo 215.10 KB
  • Recuento de archivos 1
  • Fecha de creación 13 enero, 2024
  • Última actualización 13 enero, 2024

Cargar múltiples archivos o imágenes con PHP y MySQL. En este articulo veremos como subir múltiples archivos o imágenes al servidor web usando PHP y MySQL, Cargar ficheros es una sección que se requiere en proyectos profesionales, por ejemplo, subir ficheros: Excel, CSV, Imágenes, etc.

Cargar múltiples archivos o imágenes con PHP y MySQL
Cargar múltiples archivos o imágenes con PHP y MySQL

Cargar múltiples archivos o imágenes con PHP y MySQL

En este ejemplo nos apoyaremos de las siguientes características y recursos:

  • Usaremos la clase class.upload.php.
  • Framework Bootstrap 5
  • Lenguaje PHP
  • HTML
  • Librería SweetAlert

Eliminar ficheros con PHP y SwetAlert
Eliminar ficheros con PHP y SwetAlert

¿Como funciona la carga de múltiples archivos o imágenes?

Para cargar archivos existen 2 formas básicas:

  • Guardar físicamente los archivos en la base de datos usando el formato blob. Esto es más pesado para la base de datos
  • Almacenar el archivo físico en el servidor y guardar una referencia en MySQL. Por ejemplo, la ubicación en la base de datos.

Estructura: Cargar múltiples archivos o imágenes

 

Base de datos

Usaremos una base de datos llamada "multiple_image", ustedes pueden personalizar ese nombre. Además, crearemos una tabla llamada "imagenes". Esta tabla servirá para almacenar la ruta de las imágenes cargadas por el formulario.

CREATE TABLE `imagenes` (
`id` int(11) NOT NULL,
`carpeta` varchar(255) CHARACTER SET utf8mb4 DEFAULT NULL,
`src` varchar(255) CHARACTER SET utf8mb4 DEFAULT NULL,
`f_creacion` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


-- Volcado de datos para la tabla `imagenes`



INSERT INTO `imagenes` (`id`, `carpeta`, `src`, `f_creacion`) VALUES
(19, 'uploads/', 'PHP-Email-Contact-Form.png', '2024-01-13 12:05:54'),
(21, 'uploads/', 'ff4bbcf6ca377b3413ba0308343c7ab0682df62b8dca60512c133acf374b9aba_KzkbgT.jpg', '2024-01-13 12:05:55'),
(22, 'uploads/', 'cakephp-dompdf.png', '2024-01-13 12:53:57');


ALTER TABLE `imagenes`
ADD PRIMARY KEY (`id`);
ALTER TABLE `imagenes`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

Nota:

Explicación de la tabla de base de datos tenemos los siguientes campos:

  • Id: identificador autoincremento de la cantidad de ficheros.
  • Carpeta: La ubicación en la que se encuentra el archivo, es decir el nombre de la carpeta.
  • Src: Aquí almacenaremos el nombre del archivo cargado
  • F_creacion: Almacenara la fecha de creación y/o carga del fichero.

Formulario para cargar imágenes (formulario.php)

Este fichero contendrá el formulario de carga y el INPUT de tipo FILE se agregan corchetes [] para definir un array. Además, agregaremos el atributo múltiple al campo para que acepte múltiples ficheros al ejecutar el explorador de Windows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Subir Multiples Imagenes y/o Archivos</title>
<script src="assets/sweetalert2.all.js"></script>
<script src="assets/jquery.min.js"></script>
<!--Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main class="flex-shrink-0">
<div class="container">
<div class="card mt-3">
<div class="card-header"> Gestor de Imagenes </div>
<div class="card-body">
<div class="row">
<div class="col-md-2">
<div class="d-grid gap-2"> <a class="btn btn-primary" href="./formulario.php">Agregar archivos</a> </div>
</div>
<div class="col-md-2">
<div class="d-grid gap-2"> <a class="btn btn-primary" href="./imagenes.php">Imagenes</a> </div>
</div>
<div class="col-md-2">
<div class="d-grid gap-2"> <a class="btn btn-primary" href="./archivos.php">Mis archivos</a> </div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header"> Subir imagenes o archivos </div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<form enctype="multipart/form-data" method="post" action="cargar.php">
<div class="mb-3">
<label for="formFile" class="form-label">Cargar uno o multiples ficheros</label>
<input class="form-control" name="image[]" required="" type="file" multiple >
</div>
<button class="btn btn-primary" type="submit">Subir archivos</button>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>

Cargar imágenes o archivos (cargar.php)

Para subir las imágenes o archivos usaremos la clase class.upload.php. Recordemos que esta clase PHP carga archivos y gestiona las imágenes muy fácilmente.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Borrado de archivo</title>
<script src="assets/sweetalert2.all.js"></script>
<script src="assets/jquery.min.js"></script>
</head>

<body>
<?php

include "dbcon.php";
include "class.upload.php";

/// mostrar errores
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$error = false;

$files = array();
foreach ($_FILES['image'] as $k => $l) {
foreach ($l as $i => $v) {
if (!array_key_exists($i, $files))
$files[$i] = array();
$files[$i][$k] = $v;
}
}

foreach ($files as $file) {
$handle = new Upload($file);
if ($handle->uploaded) {
$handle->process("uploads/");
if ($handle->processed) {
// usaremos la funcion insertar_image de la libreria dbcon.php
insertar_image("uploads/",$handle->file_dst_name);
} else {
$error = true;
echo 'Error: ' . $handle->error;
}
} else {
$error = true;
echo 'Error: ' . $handle->error;
}
unset($handle);
}
// Si todo esta correcto imprimimos este resultado
if(!$error){
print "<h4>Cargado con exito!</h4>";
print "<ul><li><a href='./formulario.php'>Agregar mas</a></li>";
print "<li><a href='./imagenes.php'>Ver imagenes</a></li>";
print "<li><a href='./archivos.php'>Ver Archivos</a></li></ul>";
echo '<script>
swal({
type: "success",
title: "¡Archivo subido correctamente!",
showConfirmButton: true,
confirmButtonText: "Cerrar"
}).then(function(result){
if(result.value){
window.location = "archivos.php";
}
});
</script>';
}

?>
</body>
</html>

Visualizar archivos (archivos.php)

El contenido de este archivo funcionará en Base a un CRUD porque nos permitirá visualizar, eliminar registros (Archivos o imágenes). Por lo tanto, haciendo uso de una tabla HTML nos permitirá ver cuántos archivos tenemos.

Mis archivos de carga de multiples archivos
Mis archivos de carga de multiples archivos

<?php
include "dbcon.php";
$files = get_images();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Subir Multiples Imagenes y/o Archivos</title>
<script src="assets/sweetalert2.all.js"></script>
<script src="assets/jquery.min.js"></script>
<!--Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main class="flex-shrink-0">
<div class="container">
<div class="card mt-3">
<div class="card-header"> Gestor de Imagenes </div>
<div class="card-body">
<div class="row">
<div class="col-md-2">
<div class="d-grid gap-2"> <a class="btn btn-primary" href="./formulario.php">Agregar archivos</a> </div>
</div>
<div class="col-md-2">
<div class="d-grid gap-2"> <a class="btn btn-primary" href="./imagenes.php">Imagenes</a> </div>
</div>
<div class="col-md-2">
<div class="d-grid gap-2"> <a class="btn btn-primary" href="./archivos.php">Mis archivos</a> </div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header"> Lista de Archivos </div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<?php if(count($files)>0):?>
<br>
<table border="1" class="table tablas table-bordered table-striped">
<thead class="table-dark">
<th>Carpeta</th>
<th>Nombre de archivo</th>
<th>Descarga</th>
<th>Accion</th>
</thead>
<tbody id="tbody">
<?php foreach($files as $f):?>
<tr>
<td><?php echo $f->carpeta;?></td>
<td><?php echo $f->src;?></td>
<td><a class="btn btn-primary" href="./descargas.php?id=<?php echo $f->id; ?>">Descargar</a></td>
<td><button class="btn btn-danger btnEliminar" type="button" idf="<?php echo $f->id; ?>">Eliminar</button></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<?php else:?>
<h4>No hay imagenes!</h4>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
/*=============================================
ELIMINAR USUARIO
=============================================*/
$(".tablas").on("click", ".btnEliminar", function(){

var idfile = $(this).attr("idf");

swal({
title: '¿Está¡ seguro de borrar el archivo?',
text: "Si no lo está¡ puede cancelar la acción!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: 'Cancelar',
confirmButtonText: 'Si, borrar archivo!'
}).then(function(result){

if(result.value){

window.location = "borrar.php?id="+idfile;

}

})

})

</script>
</body>
</html>

Ver imágenes (imagenes.php)

Nos permitirá visualizar las imágenes cargadas al servidor mediante la etiqueta <IMG>

Gestor de multiples imagenes
Gestor de multiples imagenes

<?php
include "dbcon.php";
$images = get_images();
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Subir Multiples Imagenes y/o Archivos</title>
<script src="assets/sweetalert2.all.js"></script>
<script src="assets/jquery.min.js"></script>
<!--Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main class="flex-shrink-0">
<div class="container">
<div class="card mt-3">
<div class="card-header"> Gestor de Imagenes </div>
<div class="card-body">
<div class="row">
<div class="col-md-2">
<div class="d-grid gap-2"> <a class="btn btn-primary" href="./formulario.php">Agregar archivos</a> </div>
</div>
<div class="col-md-2">
<div class="d-grid gap-2"> <a class="btn btn-primary" href="./imagenes.php">Imagenes</a> </div>
</div>
<div class="col-md-2">
<div class="d-grid gap-2"> <a class="btn btn-primary" href="./archivos.php">Mis archivos</a> </div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header"> Lista de imagenes o archivos </div>
<div class="card-body">
<div class="row">
<?php if(count($images)>0):?>
<?php foreach($images as $img):?>
<div class="col-md-3">
<div class="card mb-3" style="max-width: 100%;"> <img src="<?php echo $img->carpeta.$img->src; ?>" class="card-img-top img-thumbnail" alt="<?php echo $img->carpeta.$img->src; ?>">
<div class="card-footer bg-transparent border-success"> <a class="btn btn-primary" href="./descargas.php?id=<?php echo $img->id; ?>">Descargar</a> <a class="btn btn-danger" href="./borrar.php?id=<?php echo $img->id; ?>">Eliminar</a> </div>
</div>
</div>
<?php endforeach;?>
<?php else:?>
<h4>No hay imagenes!</h4>
<?php endif; ?>
</div>
</div>
</div>
</div>
</main>
</body>
</html>

Contenido del Script Cargar múltiples imágenes

El fichero ZIP de descarga cuenta con 8 archivos:

  • multiple_image.sql : La consulta SQL de la tabla MySQL.
  • class.upload.php : Clase para subir imágenes/archivos, recortar, tamaños, etc.
  • dbcon.php : Almacena la conexión a la base de datos y las funciones de agregar, mostrar y eliminar.
  • formulario.php : Archivo que contiene el formulario para seleccionar las imágenes o archivos.
  • cargar.php : El script completo para subir imágenes o archivos y agregar nombres a la base de datos.
  • descargas.php: Script para descargar el archivo desde el servidor mediante PHP.
  • imagenes.php : Muestra las imágenes que hemos subido al servidor y que están “almacenadas” en la base de datos y almacenadas en Disco.
  • archivos.php: Muestra todos los archivos que hemos subido y que están “guardados” en la base de datos en formato de tabla. Desde este fichero podemos descargar y/o eliminar.
  • borrar.php: Eliminar imágenes o archivos desde MySQL y el disco del servidor.

Para finalizar

  • Existen varias formas de cargar una o múltiples imágenes al servidor, algunos sencillos y otros con más opciones. En este ejemplo hemos usado la clase class.upload.php
  • Se puede agregar más campos, agregar más estilos, etc.
  • Para existe ejemplo acerca de los mensajes emergentes hemos agregado SweetAlert para confirmar la eliminación a través de Ajax.

Descargar
Leave a Reply

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad