En este tutorial crearemos como cargar imagenes con Ajax usando PHP y MYSQL. Este código cargará el archivo de imagen a la base de datos MySQLi con la ayuda de la solicitud ajax para evitar la actualización de la página. El código usa jQuery ajax para cargar el archivo de imagen al servidor MySQLi al evitar la actualización web y modificar las propiedades del elemento HTML para mostrar los datos de recepción. Este es un tipo de programa fácil de usar, siéntase libre de usarlo en su programa.
Utilizaremos jQuery, un marco de JavaScript que está diseñado para simplificar el recorrido y la manipulación del árbol DOM HTML. Puede recuperar DOM y manipular cada propiedad de un elemento en función de diferentes criterios, como id, clase, etc.
Empezando:
Primero debe descargar e instalar XAMPP o cualquier servidor local que ejecute scripts PHP. Aquí está el enlace para el servidor XAMPP https://www.apachefriends.org/index.html.
Y este es el enlace para el jquery que utilicé en este tutorial https://jquery.com/.
Por último, este es el enlace para el bootstrap que utilicé para el diseño del diseño https://getbootstrap.com/.
Crear base de datos:
Abra el servidor web de su base de datos, luego cree un nombre de base de datos en ella db_ajax_image, luego haga clic en Importar, luego ubique el archivo de la base de datos dentro de la carpeta de la aplicación y luego haga clic en Aceptar.
Crear la conexión de la base de datos:
Abra su editor de texto de cualquier tipo (notepad ++, etc.). Luego simplemente copie / pegue el código a continuación y luego llámelo conn.php.
<?php
$conn = mysqli_connect('localhost', 'root', ' ', 'db_ajax_image');
if(!$conn){
die("Error: Fallo la Conexion a la DB!");
}
?>
Crear la interfaz:
Aquí es donde crearemos un formulario simple para nuestra aplicación. Para crear los formularios, simplemente cópielos y escríbalos en su editor de texto, luego guárdelos como index.php.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://compubinario.com">CompuBinario</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Cargar Imagenes con Ajax usando PHP en MYSQL</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-4">
<form>
<div class="form-group">
<input type="file" id="image" class="form-control"/>
</div>
<br />
<center><button type="button" class="btn btn-primary" id="upload">Cargar</button></center>
</form>
</div>
<div class="col-md-8" id="result" style="padding:10px; border:1px solid #000;"></div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Crear la función principal:
Este código contiene la función principal de la aplicación. Este código cargará el archivo de imagen cuando se haga clic en el botón. Para hacer esto, simplemente copie y escriba este bloque de códigos a continuación dentro del editor de texto, luego guárdelo como se muestra a continuación:
get_image.php
<?php
require_once 'conn.php';
$query=mysqli_query($conn, 'SELECT * FROM `image`') or die(mysqli_error());
while($fetch=mysqli_fetch_array($query)){
echo "<img src='".$fetch['location']."' style='float:left; margin:15px;' width='100' height='100'/>";
}
?>
upload.php
<?php
require_once 'conn.php';
if(!empty($_FILES['image'])){
$image_name = $_FILES['image']['name'];
$image_temp = $_FILES['image']['tmp_name'];
$image_size = $_FILES['image']['size'];
$exp = explode(".", $image_name);
$ext = end($exp);
$allowed_ext = array('jpg', 'jpeg', 'png');
if(in_array($ext, $allowed_ext)){
$image = time().'.'.$ext;
$location = "upload/".$image;
if($image_size < 5242880){
move_uploaded_file($image_temp, $location);
mysqli_query($conn, "INSERT INTO `image` VALUES('', '$image', '$location')") or die(mysqli_error());
echo "success";
}else{
echo "error3";
}
}else{
echo "error2";
}
}else{
echo "error1";
}
?>
script.js
Nota: Para que el script funcione, asegúrese de guardar este archivo dentro del directorio js.
$(document).ready(function(){
display_image();
function display_image(){
$.ajax({
url: 'get_image.php',
type: 'POST',
data: {res: 1},
success: function(data){
$('#result').html(data);
}
});
}
$('#upload').on('click', function(){
var image = $('#image');
var image_data = image.prop('files')[0];
var formData = new FormData();
formData.append('image', image_data);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
contentType:false,
cache: false,
processData: false,
success: function(data){
if(data == "success"){
alert('Image Uploaded');
display_image();
}else if(data == "error1"){
alert("Please upload file first!");
}else if(data == "error2"){
alert('Wrong Image format');
}else if(data == "error3"){
alert('File too large to upload');
}
}
});
});
});
Ahí lo tienes, creamos con éxito Cargar Imagenes con Ajax usando PHP en MYSQL. Espero que este sencillo tutorial te ayude a lo que estás buscando.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
