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

Versión

Tamaño del archivo 215.10 KB

Descargas 2186

Files 1

Published 13 enero, 2024

Updated 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.

💣 Descarga sistemas PHP y Laravel COMPLETOS GRATIS

Recursos premium listos para usar en proyectos reales 💻

👥 +1000 desarrolladores · 🔥 Publicaciones diarias

🔥 Unirme al canal GRATIS ahora 👥 Grupo de Facebook

⏳ Enlaces disponibles por tiempo limitado

💻 Sistemas completos 🔌 Plugins PRO ⚡ Scripts listos 🔥 Recursos exclusivos

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

¿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

<?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>

<?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

or download free

[free_download_btn]