Viste mi Foto – Subiendo Imágenes con PHP y MSQLi

Publicado by Angel Leonardo Biancoen

Cada vez que tengo que hacer un trabajo para afuera, siempre, tarde o temprano aparece un item donde se debe subir una imagen al sitio.

Y siempre me pasa que nunca tengo guardada una forma estándar de hacerlo …

Ergo, siempre tengo que andar buscando cómo hacerlo. Para que eso no me ocurra, me he dado en escribirlo, y de escribirlo en un sólo archivo sin uso de ajax para no tener que andar cargando librerías de más.

La idea es crear un form que tome una imagen y algo de texto, se envíe al servidor y se guarde tanto en la BBDD como en una carpeta “/imagenes”.

Mínimo precisamos una tabla, a la cual llamaremos image_upload, que deberá tener por lo menos las siguientes columnas:

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

Y nos vamos de lleno a crear el archivo carga.php con el siguiente código:

<?php
  // Crear Conexión a la BBDD
  $db = mysqli_connect("localhost", "root", "", "image_upload");

  // Inicializamos las variables
  $msg = "";

  // Si el botón "upload" fue presionado ...
  if (isset($_POST['upload'])) {
  	// Obtener el nombre de la imagen
  	$image = $_FILES['image']['name'];
  	// Obtener el texto de la imagen
  	$image_text = mysqli_real_escape_string($db, $_POST['image_text']);

  	// Directorio de guardado de la imagen
  	$target = "images/".basename($image);

  	$sql = "INSERT INTO images (image, image_text) VALUES ('$image', '$image_text')";
  	// ejecutamos la consulta
  	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="Escriba algo de la imagen..."></textarea>
  	</div>
  	<div>
  		<button type="submit" name="upload">POST</button>
  	</div>
  </form>
</div>
</body>
</html>

Y, en bruto, les queda algo similar a esto:

Y eso, simplemente eso es todo.

Tengan en cuenta que:

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

Siempre tiene que poner “multipart/form-data” o la imagen no se subirá nunca, quedará en ciclo y putearemos porque no veremos dónde está el error.

 

 

Deja un comentario