Post Top Ad

Your Ad Spot

jueves, 7 de mayo de 2020

Carga de imágenes usando la base de datos PHP y MySQL

En este tutorial, creamos un formulario que toma una imagen y algo de texto. Cuando el usuario selecciona una imagen, ingresa 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
Cree un archivo llamado index.php y busque 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. Me gusta 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 deben codificarse los datos del formulario al enviar el formulario. Sin él, la carga de archivos no funcionará.
Gracias: D

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas