Carga de imágenes usando php y base de datos MySQL

En este tutorial, creamos un formulario que toma una imagen y algo de texto. Cuando el usuario selecciona una imagen, ingresa un texto y hace clic en el botón enviar, los datos se envían al servidor. PHP ahora toma la imagen y la guarda en una carpeta en el proyecto, y luego guarda el texto en la base de datos junto con un enlace que apunta a la imagen en la carpeta.

Cree una base de datos llamada image_upload y cree una tabla llamada imágenes con campos:

  • id – int (11)
  • imagen – varchar (100)
  • image_text – texto

Crea un archivo llamado index.php y agrega el siguiente código (el código completo):

index.php:

<?php
  // Create database connection
  $db = mysqli_connect("localhost", "root", "", "image_upload");

  // Initialize message variable
  $msg = "";

  // If upload button is clicked ...
  if (isset($_POST['upload'])) {
  	// Get image name
  	$image = $_FILES['image']['name'];
  	// Get text
  	$image_text = mysqli_real_escape_string($db, $_POST['image_text']);

  	// image file directory
  	$target = "images/".basename($image);

  	$sql = "INSERT INTO images (image, image_text) VALUES ('$image', '$image_text')";
  	// execute query
  	mysqli_query($db, $sql);

  	if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
  		$msg = "Image uploaded successfully";
  	}else{
  		$msg = "Failed to upload image";
  	}
  }
  $result = mysqli_query($db, "SELECT * FROM images");
?>
<!DOCTYPE html>
<html>
<head>
<title>Image Upload</title>
<style type="text/css">
   #content{
   	width: 50%;
   	margin: 20px auto;
   	border: 1px solid #cbcbcb;
   }
   form{
   	width: 50%;
   	margin: 20px auto;
   }
   form div{
   	margin-top: 5px;
   }
   #img_div{
   	width: 80%;
   	padding: 5px;
   	margin: 15px auto;
   	border: 1px solid #cbcbcb;
   }
   #img_div:after{
   	content: "";
   	display: block;
   	clear: both;
   }
   img{
   	float: left;
   	margin: 5px;
   	width: 300px;
   	height: 140px;
   }
</style>
</head>
<body>
<div id="content">
  <?php
    while ($row = mysqli_fetch_array($result)) {
      echo "<div id='img_div'>";
      	echo "<img src='images/".$row['image']."' >";
      	echo "<p>".$row['image_text']."</p>";
      echo "</div>";
    }
  ?>
  <form method="POST" action="index.php" enctype="multipart/form-data">
  	<input type="hidden" name="size" value="1000000">
  	<div>
  	  <input type="file" name="image">
  	</div>
  	<div>
      <textarea 
      	id="text" 
      	cols="40" 
      	rows="4" 
      	name="image_text" 
      	placeholder="Say something about this image..."></textarea>
  	</div>
  	<div>
  		<button type="submit" name="upload">POST</button>
  	</div>
  </form>
</div>
</body>
</html>

Y eso es todo.

Asegúrese de incluir el enctype en su etiqueta de formulario. Como esto:

<form method="POST" action="index.php" enctype="multipart/form-data">

Sin el atributo enctype = “multipart / form-data”, la imagen no se cargará. enctype es el tipo de codificación que especifica cómo se deben codificar los datos del formulario al enviar el formulario. Sin él, la carga de archivos no funcionará.

Gracias: D

Deja un comentario