Ajax carga de múltiples imágenes con PHP MySQL
Ajax carga de múltiples imágenes con eliminación, actualización, edición usando PHP Mysql
Ajax carga de múltiples imágenes. Aquí aprenderemos a cargar múltiples imágenes o archivos sin recargar formularios usando Ajax jQuery y PHP. Además, complementaremos el tema con las opciones de un CRUD PHP. es decir:
- Visualizar las imágenes cargadas
- Editar los registros con las imágenes subidas al servidor
- Actualizar la información de la imagen en bases de datos
- Eliminar imágenes de carpetas y de una base de datos.
Trataremos varios temas en este artículo para que puedas aprender mucho sobre el uso de AJAX y PHP.
Ventajas de este sistema
- Subir archivos al servidor (Imágenes) usando un formulario con el framework Bootstrap 4.5
- Usaremos jQuery y Ajax para no recargar el navegador
- Subir imágenes al servidor sin actualizar el navegador
- Eliminar registros sin actualizar el navegador
- Eliminar imágenes de las carpetas
¿Cómo funciona el Script?
- Si se cargan varias imágenes en la carpeta después de haber cargado las imágenes, se mostrarán detalles como el nombre de la imagen en la tabla.
- Todos los datos de imagen cargados se introducirán en una tabla de MySQL.
- Una vez cargado la imagen, usaremos la función Ajax para obtener los detalles (registros) de la imagen de la tabla MySQL
- Mostraremos la página web en forma de filas con los botones editar, eliminar y vista previa de la imagen.
- Al cargar nuevas imágenes se insertarán los nombres de la imagen a una tabla de MySQL y el proceso se realiza sin actualizar la página web, ya que estamos usando Ajax para estas cosas con PHP y MySQL.
¿Cómo editar un registro MySQL?
- Si queremos editar o actualizar algunos detalles como el nombre de la imagen y luego las cosas que hacemos con el modal de arranque.
- Tenemos que pulsar el botón de edición, ciertos detalles de la imagen están disponibles con un modal emergente.
- Aquí podemos cambiar no solo el nombre de la imagen en la tabla MySQL, sino también el nombre de la imagen en la carpeta.
Eliminar registros
Para eliminar la imagen o registro no solo elimina los datos de la imagen de la tabla MySQL, sino que también elimina la imagen de la carpeta alojada en el servidor. Sin embargo, este proceso se lleva a cabo sin actualizar el sitio web porque estamos usando Ajax JQuery con PHP MySQL.
Ajax carga de múltiples imágenes: Estructura del script
Base de datos
Necesitamos crear una base de datos y una tabla en MySQL en este ejemplo le pondremos de nombre «table_images«. Veamos el ejemplo.
CREATE TABLE `table_images` ( `id` int(11) NOT NULL, `images` varchar(255) NOT NULL, `fregis` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -- Volcado de datos para la tabla `table_images` -- INSERT INTO `table_images` (`id`, `images`, `fregis`) VALUES (10, '1300936380.jpg', '2021-07-29 15:57:01'), (11, '1779071970.jpg', '2021-07-29 15:57:19'), (12, '1893039121.jpg', '2021-07-29 15:57:19'), (13, '641042864.jpg', '2021-07-29 15:57:19'), (14, '1087870570.png', '2021-07-29 15:57:19'), (15, '410902717.jpg', '2021-07-29 15:57:36'); ALTER TABLE `table_images` ADD PRIMARY KEY (`id`); ALTER TABLE `table_images` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=16;
Conexión con MySQL
Para poder conectarnos con MySQL necesitamos un script PHP para lograr conectarnos y realizar las tareas CRUD, el archivo se llamará (dbConnection.php). Veamos el script.
<?php
// Conexión con MySQL
$sernamename = "localhost";
$username = "root";
$passoword = "";
$databasename= "b_multiple";
// Create database connection
$con = mysqli_connect($sernamename, $username,$passoword,$databasename);
// Check connection
if ($con->connect_error) {
die("Connection failed". $con->connect_error);
}
?>
Front-End
Necesitamos crear un archivo llamado index.php que contendrá la parte principal es decir donde se mostrara la información. Por lo tanto, para lograr una interfaz profesional usaremos el framework Bootstrap para cargar varios archivos.
<!DOCTYPE html> <html lang="en"> <head> <title>Ajax carga de múltiples imágenes con PHP MySQL</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="jumbotron text-center" style="padding: 2rem 2rem;"> <h4>Ajax carga de múltiples imágenes con PHP MySQL</h4> </div> <div class="container"> <form id="submitForm"> <div class="row"> <div class="col-md-6"> <div class="input-group"> <div class="custom-file mb-3"> <input type="file" class="custom-file-input" name="multipleFile[]" id="multipleFile" required="" multiple> <label class="custom-file-label" for="multipleFile">Elija varias imágenes para cargar</label> </div> </div> </div> <div class="col-md-2"> <button type="submit" name="upload" class="btn btn-primary">Cargar Archivos</button> </div> </div> </form> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="alert alert-success alert-dismissible" id="success" style="display: none;"> <button type="button" class="close" data-dismiss="alert">×</button> El archivo se ha cargado correctamente </div> </div> </div> </div> <!-- view of uploaded images --> <div class="container" id="gallery"></div> <!--Edit Multiple image form --> <div class='modal' id='exampleModal'> <div class='modal-dialog'> <div class='modal-content'> <div class='modal-header'> <h4 class='modal-title'>Actualizar imagen</h4> <button type='button' class='close' data-dismiss='modal'>×</button> </div> <div id="editForm"> </div> </div> </div> </div> </body> </html>
jQuery AJAX
Código para cargar varios archivos con las siguientes opciones: Ver, Editar, actualización y eliminación de registros almacenados en la base de datos.
<script type="text/javascript">
$(document).ready(function(){
$("#submitForm").on("submit", function(e){
e.preventDefault();
$.ajax({
url :"upload.php",
type :"POST",
cache:false,
contentType : false, // you can also use multipart/form-data replace of false
processData : false,
data: new FormData(this),
success:function(response){
$("#success").show();
$("#multipleFile").val("");
fetchData();
}
});
});
// Fetch Data from Database
function fetchData(){
$.ajax({
url : "fetch_data.php",
type : "POST",
cache: false,
success:function(data){
$("#gallery").html(data);
}
});
}
fetchData();
// Edit Data from Database
$(document).on("click",".btn-success", function(){
var editId = $(this).data('id');
$.ajax({
url : "edit.php",
type : "POST",
cache: false,
data : {editId:editId},
success:function(data){
$("#editForm").html(data);
}
});
});
// Delete Data from database
$(document).on('click','.delete-btn', function(){
var deleteId = $(this).data('id');
if (confirm("¿Está seguro de que desea eliminar esta imagen?")) {
$.ajax({
url : "delete.php",
type : "POST",
cache:false,
data:{deleteId:deleteId},
success:function(data){
$("#success").show();
fetchData();
//alert("La imagen eliminada correctamente");
}
});
}
});
// Update Data from database
$(document).on("submit", "#editForm", function(e){
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url : "update.php",
type : "POST",
cache: false,
contentType : false, // you can also use multipart/form-data replace of false
processData : false,
data: formData,
success:function(response){
$("#exampleModal").modal('hide');
alert("Imagen actualizada correctamente");
fetchData();
}
});
});
});
</script>
Cargar Archivos
Con este script podemos cargar varios archivos con código PHP & MySQL usando jQuery para no refrescar la página y el archivo tendrá como nombre upload.php.
<?php
// Conexión con MySQL
require_once('dbConnection.php');
// Upload multiple image in Database using PHP MYSQL
if (!empty($_FILES['multipleFile']['name'])) {
$multiplefile = $_FILES['multipleFile']['name'];
foreach ($multiplefile as $name => $value) {
$allowImg = array('png','jpeg','jpg','gif');
$fileExnt = explode('.', $multiplefile[$name]);
$fileTmp = $_FILES['multipleFile']['tmp_name'][$name];
$newFile = rand(). '.'. $fileExnt[1];
$target_dir = 'uploads/'.$newFile;
if (in_array($fileExnt[1], $allowImg)) {
if ($_FILES['multipleFile']['size'][$name] > 0 && $_FILES['multipleFile']['error'][$name]== 0) {
if (move_uploaded_file($fileTmp, $target_dir)) {
$query = "INSERT INTO table_images (images) VALUES('$newFile')";
mysqli_query($con, $query);
}
}
}
}
}
?>
Recuperar registros
En el front-end debemos de recuperar los registros de las imágenes y devolverlo en el fichero index.php. Por lo tanto, este archivo se llamará fetch_data.php
<?php
// Database connection
require_once('dbConnection.php');
$query = "SELECT * FROM table_images ORDER BY id DESC";
$result = mysqli_query($con, $query);
$output = "";
if (mysqli_num_rows($result) > 0) {
$output .= "<table class='table table-striped'>";
$output .= "<thead>
<tr>
<th>Nro.</th>
<th>Imagen</th>
<th>Editar</th>
<th>Borrar</th>
</tr>
</thead>";
while ($row = mysqli_fetch_assoc($result)) {
$images = 'uploads/'. $row['images'];
$output .= "<tr>
<td>".$row["id"]."</td>
<td><img src='".$images."' class='img-thumbnail' width='80px' height='80px' /></td>
<td><button type='button' class='btn btn-success btn-sm' data-toggle='modal' data-target='#exampleModal' data-id='".$row["id"]."'>Editar</button></td>
<td><button type='button' class='btn btn-danger btn-sm delete-btn' data-id='".$row["id"]."'>Borrar</button></td>
</tr>";
}
$output .="</tbody>
</table>";
echo $output;
}else{
echo "<hr><h5 style='text-align:center'>No se ha encontrado ninguna imagen</h5>";
}
?>
Editar Registros
Para poder editar registros usaremos una ventana modal con ayuda del framework Bootstrap. Sin embargo, en esta ventana se podrán editar el registro correspondiente, a continuación, el ejemplo completo del archivo edit.php
<?php
// Database connection
require_once('dbConnection.php');
if (isset($_POST['editId'])) {
$editId = $_POST['editId'];
}
if (!empty($editId)) {
$query = "SELECT * FROM table_images WHERE id = $editId";
$result = mysqli_query($con, $query);
if (mysqli_num_rows($result) > 0) {
$output = "";
while($row = mysqli_fetch_assoc($result)) {
$image = 'uploads/'.$row['images'];
$output.="<form id='editForm'>
<div class='modal-body' style='height: 200px;'>
<input type='hidden' name='image_id' id='image_id' value='".$row['id']."'/>
<div class='form-group'>
<div class='custom-file mb-3'>
<input type='file' class='custom-file-input' name='file_name' id='file_name'>
<label class='custom-file-label'>Elija la imágen que desea cargar</label>
<img src='".$image."' class='img-thumbnail' width='120px' height='120px'/>
</div>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-danger' data-dismiss='modal'>Cerrar</button>
<button type='submit' class='btn btn-success'>Actualizar</button>
</div>
</form>";
}
echo $output;
}
}
?>
Actualizar registros
SI bien en la ventana modal de podrá seleccionar y editar el registro con la nueva imagen haciendo uso de un input file. Por lo tanto, este archivo se llamará update.php y contendrá las validaciones PHP para poder editar de manera correcta el registro.
<?php
// Conexión con MySQL
require_once('dbConnection.php');
if (isset($_POST['image_id'])) {
$image_id = $_POST['image_id'];
}
if (!empty($_FILES['file_name']['name'])) {
$fileTmp = $_FILES['file_name']['tmp_name'];
//Verificamos las extensiones de imagen para insertar
$allowImg = array('png','jpeg','jpg','gif');
$fileExnt = explode('.', $_FILES['file_name']['name']);
$fileActExt = strtolower(end($fileExnt));
$newFile = rand(). '.'. $fileActExt;
// Declaramos la ruta para almacenar las imagenes
$destination = 'uploads/'.$newFile;
if (in_array($fileActExt, $allowImg)) {
if ($_FILES['file_name']['size'] > 0 && $_FILES['file_name']['error']==0) {
$query = "SELECT * FROM table_images WHERE id = '$image_id'";
$result = mysqli_query($con, $query);
$row = mysqli_fetch_assoc($result);
$filePath = 'uploads/'.$row['images'];
if (move_uploaded_file($fileTmp, $destination)) {
$update = "UPDATE table_images SET images = '$newFile' WHERE id = '$image_id'";
mysqli_query($con, $update);
unlink($filePath);
}
}
}
}
?>
Borrar registros
Es parte del CRUD y es fundamental la opción de eliminar un registro que ya no deseamos tenerlo en la base de datos. además, posee varias opciones como ser: eliminar el registro de MySQL y eliminar la imagen en el disco del servidor web usando la función unlink del lenguaje PHP.
El archivo tendrá como nombre Delete.php
<?php
// Conexión con MySQL
require_once('dbConnection.php');
if (isset($_POST['deleteId'])) {
$deleteId = $_POST['deleteId'];
$sql = "SELECT * FROM table_images WHERE id = $deleteId";
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_assoc($result);
$filePath = 'uploads/'.$row['images'];
$query = "DELETE FROM table_images WHERE id = $deleteId";
if (mysqli_query($con, $query)) {
unlink($filePath);
}
}
?>
Conclusión
En este pequeño articulo hemos aprendido a cargar múltiples imágenes usando PHP y jQuery para evitar solicitudes innecesarias de tipo HTTP.
Hemos aprendido a usar la función unlink para eliminar las imágenes del servidor.
En resumen, en este post estamos haciendo una actualización de inserción y eliminando algunas imágenes en PHP usando MySQL.
Puedes apoyar compartiendo en las redes sociales o recomendando mi blog a tus amigos.
Si usted tiene alguna sugerencia y/o problema acerca de este tutorial, por favor comente en el siguiente formulario.
Muy bueno, pero y si queremos usarlo con archivos PDF? ya lo intente permitiendo que acepte PDF, pero no logro que se visualice junto con las demás imágenes en la tabla. que debería colocar para que se vean los PDF en pequeño o los links al PDF?
Nestor, gracias por compartir siempre tus conocimientos con todos . 🙂 Saludos