¿Cómo cargar una imagen en la base de datos y mostrarla usando PHP?

Posted on by Rudeus Greyrat

Cargar la imagen/videos en la base de datos y mostrarlos usando PHP es la forma de cargar la imagen en la base de datos y obtenerla de la base de datos. Usando el código PHP, el usuario carga la imagen o los videos que ingresan de manera segura a la base de datos y las imágenes deben guardarse en una ubicación particular extrayéndolas de la base de datos.
Si alguno de los sitios web contiene la funcionalidad para cargar imágenes/videos con algún detalle, mediante el uso de este código cargaremos la imagen en su base de datos y si desea determinar qué tiene que cargar la persona. Y con este código, la imagen que se carga se guarda en su sistema donde se le proporciona la ubicación.

Enfoque: asegúrese de tener el servidor XAMPP o WAMP instalado en su máquina. En este tutorial, usaremos el servidor WAMP.

1. Crear base de datos: Primero, crearemos una base de datos llamada ‘ geeksforgeeks ‘. Puede usar su base de datos existente o crear una nueva.

crear base de datos «geeksforgeeks»

2. Crear tabla : cree una tabla llamada ‘ imagen ‘. La tabla contiene dos campos: 

  • identificación – int(11)
  • nombre de archivo – varchar (100)

La identificación debe estar en incremento automático (AI) . La estructura de su tabla debería verse así:

estructura de tabla de «imagen»

O puede crear una tabla copiando y pegando el siguiente código en el panel SQL de su PHPMyAdmin .

CREATE TABLE IF NOT EXISTS `image` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `filename` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Para hacer esto desde el panel SQL, consulte la siguiente captura de pantalla.

crear una tabla ‘imagen’ desde el panel SQL

Usaremos Bootstrap aquí para usar el control de formulario de Bootstrap . A continuación se muestra el código para incluir el enlace CDN de Bootstrap en la sección principal del código HTML.

<enlace rel=”hoja de estilo” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css”>

Creación de carpetas y archivos:

Ahora crearemos una carpeta llamada » imagen «. Los archivos cargados por el cliente en el servidor se almacenarán en esta carpeta. Crea index.php y style.css . Mantenga la carpeta principal de su proyecto (por ejemplo aquí… GeeksForGeeks ) en la carpeta » C://wamp64/www/ «, si está usando WAMP o » C://xampp/htdocs/ » si está usando el servidor XAMPP respectivamente. La estructura de carpetas debería verse así:

estructura de carpetas

Programa: Ahora, crearemos un formulario HTML para cargar archivos de imagen (puede cargar cualquier tipo de archivo como .pdf o .mp4) y mostraremos la imagen cargada.

  • Código HTML: 

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>Image Upload</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
   
<body>
    <div id="content">
        <form method="POST" action="" enctype="multipart/form-data">
            <div class="form-group">
                <input class="form-control" type="file" name="uploadfile" value="" />
            </div>
            <div class="form-group">
                <button class="btn btn-primary" type="submit" name="upload">UPLOAD</button>
            </div>
        </form>
    </div>
    <div id="display-image">
    <?php
        $query = " select * from image ";
        $result = mysqli_query($db, $query);
 
        while ($data = mysqli_fetch_assoc($result)) {
    ?>
        <img src="./image/<?php echo $data['filename']; ?>">
 
    <?php
        }
    ?>
    </div>
</body>
 
</html>

Explicación del código PHP: 

  • Primero seleccionamos los registros de la tabla en la variable $query.
  • Entonces el $resultado ejecutará la consulta.
  • Mientras que el bucle se usa para obtener todos los registros en $data para obtener la imagen de la base de datos.
  • Y finalmente, las imágenes obtenidas se muestran con la ayuda de la etiqueta <img>. En la etiqueta <img> estamos pasando la ubicación del archivo cargado en el servidor y el nombre del archivo de imagen en nuestra base de datos.
  • Código CSS: El style.css es el archivo que le da estilo al formulario en un nuevo diseño y el código se proporciona a continuación. 
     

CSS

*{
    margin: 0;
      padding: 0;
      box-sizing: border-box;
}
 
#content{
    width: 50%;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    border: 1px solid #cbcbcb;
}
form{
    width: 50%;
    margin: 20px auto;
}
 
#display-image{
    width: 100%;
    justify-content: center;
    padding: 5px;
    margin: 15px;
}
img{
    margin: 5px;
    width: 350px;
    height: 250px;
}

Puede copiar el código anterior y mencionarlo directamente en el código principal o crear un enlace igual en el código HTML y adjuntarlo con el código principal que se proporciona a continuación. Como se mencionó, si vincula el archivo de hoja de estilo , debe crear otro archivo en formato .css y guardarlo en el lugar donde se guardará el archivo principal. El formulario creado con la ayuda del método POST y el enctype=”multipart/form-data” es la acción que codifica los archivos y te permite enviarlos a través de POST.
Ahora estamos trabajando en el código PHP para la transferencia de la imagen desde cualquier carpeta del sistema en una carpeta particular que está mencionando y almacenándola en la base de datos como un directorio.
 

  • Código PHP: El código PHP es para subir imágenes, el nombre del archivo se guarda con index.php , también puedes guardarlo con otro nombre como prefieras. 
     

PHP

<?php
error_reporting(0);
 
$msg = "";
 
// If upload button is clicked ...
if (isset($_POST['upload'])) {
 
    $filename = $_FILES["uploadfile"]["name"];
    $tempname = $_FILES["uploadfile"]["tmp_name"];
    $folder = "./image/" . $filename;
 
    $db = mysqli_connect("localhost", "root", "", "geeksforgeeks");
 
    // Get all the submitted data from the form
    $sql = "INSERT INTO image (filename) VALUES ('$filename')";
 
    // Execute query
    mysqli_query($db, $sql);
 
    // Now let's move the uploaded image into the folder: image
    if (move_uploaded_file($tempname, $folder)) {
        echo "<h3>  Image uploaded successfully!</h3>";
    } else {
        echo "<h3>  Failed to upload image!</h3>";
    }
}
?>

Explicación: La siguiente es la explicación para crear el código PHP que es la siguiente: 

  • El error_reporting(0) es para obtener 0 errores mientras se ejecuta el código PHP.
  • $_files funciona detrás de escena. Se está utilizando para cargar archivos a través del método HTTP POST y mantener los atributos de los archivos.
  • $filename es un nombre que se usa para identificar de manera única un archivo de computadora almacenado en un sistema de archivos.
  • $tempname se usa para copiar el nombre original del archivo que se carga en la base de datos como el nombre temporal donde se almacena la imagen después de la carga.
  • $carpeta define la ruta de la imagen cargada en la base de datos a la carpeta donde desea que se almacene. El “./imagen/” es el nombre de la carpeta donde se guardará la imagen después de la carga. Y $filename se usa para buscar o cargar el archivo.
  • $db, la línea básica para cualquiera de los códigos PHP para conectarse a la base de datos.
  • $sql se usa para insertar la imagen en la base de datos de la imagen del nombre de la tabla en el nombre de archivo variable.
  • mysqli_query es la función para ejecutar una consulta de $db y $sql.
  • Ahora, muevamos la imagen cargada a la carpeta llamada imagen. La carpeta con el nombre de la imagen se guarda en la carpeta del servidor WAMP o XAMPP que se encuentra en la unidad C en la carpeta www.

Combinación de los códigos anteriores: el código final para cargar la imagen en MySQL usando PHP es el siguiente. 
 

  • Programa: Nombre de archivo: index.php Este archivo combina el código HTML y PHP. 
     

PHP

<?php
error_reporting(0);
 
$msg = "";
 
// If upload button is clicked ...
if (isset($_POST['upload'])) {
 
    $filename = $_FILES["uploadfile"]["name"];
    $tempname = $_FILES["uploadfile"]["tmp_name"];
    $folder = "./image/" . $filename;
 
    $db = mysqli_connect("localhost", "root", "", "geeksforgeeks");
 
    // Get all the submitted data from the form
    $sql = "INSERT INTO image (filename) VALUES ('$filename')";
 
    // Execute query
    mysqli_query($db, $sql);
 
    // Now let's move the uploaded image into the folder: image
    if (move_uploaded_file($tempname, $folder)) {
        echo "<h3>  Image uploaded successfully!</h3>";
    } else {
        echo "<h3>  Failed to upload image!</h3>";
    }
}
?>
 
<!DOCTYPE html>
<html>
 
<head>
    <title>Image Upload</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
    <div id="content">
        <form method="POST" action="" enctype="multipart/form-data">
            <div class="form-group">
                <input class="form-control" type="file" name="uploadfile" value="" />
            </div>
            <div class="form-group">
                <button class="btn btn-primary" type="submit" name="upload">UPLOAD</button>
            </div>
        </form>
    </div>
    <div id="display-image">
        <?php
        $query = " select * from image ";
        $result = mysqli_query($db, $query);
 
        while ($data = mysqli_fetch_assoc($result)) {
        ?>
            <img src="./image/<?php echo $data['filename']; ?>">
 
        <?php
        }
        ?>
    </div>
</body>
 
</html>
  • Salida: finalmente, debería poder cargar las imágenes en la base de datos y mostrarlas extrayéndolas de la base de datos.
     

producción

Conclusión: la imagen cargada en la base de datos con el código PHP es simple y se usa para varios propósitos. El código ayuda a cargar la imagen y luego carga la imagen en la base de datos y se puede mostrar en otra carpeta.
Una cosa que debe tener en cuenta es que cuando ejecuta este programa, debe existir la posibilidad de que la imagen no se cargue más de 2 MB porque el programa PHP ha establecido el valor predeterminado de cargar una imagen de 2 MB y publicar la imagen de 8. MEGABYTE. Para exceder el tamaño de carga de la imagen debe seguir los siguientes pasos:
 

  • Primero, abra la unidad C, luego abra la carpeta del servidor WAMP o XAMPP.
  • Luego abra la carpeta bin .
  • Abra la carpeta de la versión de PHP (carpeta PHP 5.6.31) (TENGA EN CUENTA QUE SI TIENE OTRA VERSIÓN DE PHP, TAMBIÉN DEBE ABRIR ESA)
  • Luego busque php.ini . Ábralo y luego busque las dos variables y cambie con ellas. Las variables son: 
     
upload_max_size = 100M
post_max_filesize = 100M
  • Guardar con este cambio y luego abrir 
C:\wamp64\bin\apache\apache2.4.27\bin
  • y busque el archivo php.ini . Cambie lo mismo que se menciona anteriormente.
  • Reinicie el servidor WAMP o XAMPP y luego ejecute el código.

PHP es un lenguaje de secuencias de comandos del lado del servidor diseñado específicamente para el desarrollo web. Puede aprender PHP desde cero siguiendo este tutorial de PHP y ejemplos de PHP .

Publicación traducida automáticamente

Artículo escrito por harshit_15_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *