Post Top Ad

Your Ad Spot

jueves, 7 de mayo de 2020

Vista previa y carga de imágenes usando la base de datos PHP y MySQL

La experiencia del usuario se puede mejorar en gran medida con una función de carga de imágenes si permitimos que el usuario obtenga una vista previa de la imagen que ha seleccionado antes de subirla al servidor haciendo clic en el botón de carga.
En este tutorial, crearemos un formulario que tome dos entradas: la imagen de perfil del usuario (imagen) y su biografía (texto). Cuando el usuario llena el formulario y hace clic en el botón de carga, usaremos nuestro script PHP para tomar los valores del formulario (la imagen y la biografía) y guardar la imagen en nuestra carpeta de proyecto llamada imágenes. Una vez que la imagen se guarda en la carpeta del proyecto, almacenaremos un registro en la base de datos que contiene el nombre de la imagen y la biografía del usuario.
Después de guardar esta información, crearemos otra página que consulta los perfiles de usuario de la base de datos y los muestra en la página con la biografía de cada usuario en contra de su foto de perfil.
Entonces, comencemos con la implementación.
Cree una carpeta de proyecto y llámela imagen-vista previa-carga . Dentro de esta carpeta, cree un archivo llamado form.php y una carpeta llamada images para almacenar las imágenes.
form.php :
<?php include_once('processForm.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Image Preview and Upload PHP</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-4 offset-md-4 form-div">
        <a href="profiles.php">View all profiles</a>
        <form action="form.php" method="post" enctype="multipart/form-data">
          <h2 class="text-center mb-3 mt-3">Update profile</h2>
          <?php if (!empty($msg)): ?>
            <div class="alert <?php echo $msg_class ?>" role="alert">
              <?php echo $msg; ?>
            </div>
          <?php endif; ?>
          <div class="form-group text-center" style="position: relative;" >
            <span class="img-div">
              <div class="text-center img-placeholder"  onClick="triggerClick()">
                <h4>Update image</h4>
              </div>
              <img src="images/avatar.jpg" onClick="triggerClick()" id="profileDisplay">
            </span>
            <input type="file" name="profileImage" onChange="displayImage(this)" id="profileImage" class="form-control" style="display: none;">
            <label>Profile Image</label>
          </div>
          <div class="form-group">
            <label>Bio</label>
            <textarea name="bio" class="form-control"></textarea>
          </div>
          <div class="form-group">
            <button type="submit" name="save_profile" class="btn btn-primary btn-block">Save User</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>
<script src="scripts.js"></script>
Antes de decir algo sobre el formulario, primero creemos un archivo de estilo llamado main.css para el formulario en la carpeta raíz de nuestro proyecto.
main.css :
.form-div { margin-top: 100px; border: 1px solid #e0e0e0; }
#profileDisplay { display: block; height: 210px; width: 60%; margin: 0px auto; border-radius: 50%; }
.img-placeholder {
  width: 60%;
  color: white;
  height: 100%;
  background: black;
  opacity: .7;
  height: 210px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
.img-placeholder h4 {
  margin-top: 40%;
  color: white;
}
.img-div:hover .img-placeholder {
  display: block;
  cursor: pointer;
}
En la primera línea de nuestro archivo form.php , incluimos un archivo que contiene nuestro script PHP responsable de recibir los valores del formulario y procesarlos (es decir, guardar la imagen en la carpeta de imágenes y crear un registro correspondiente en la tabla de usuarios en la base de datos).
Si observa el formulario, verá que establecemos el valor de la visualización de la propiedad CSS en ninguno ; Estamos haciendo esto porque no queremos mostrar el elemento de entrada HTML predeterminado para cargar archivos. En su lugar, crearemos un elemento diferente y le daremos el estilo que deseemos y luego, cuando el usuario haga clic en nuestro elemento, usaremos JavaScript debajo del capó para activar el elemento de entrada del archivo HTML que está oculto para nosotros.
Ahora agreguemos los scripts responsables de activar el elemento de entrada del archivo y luego también mostrar la imagen para la vista previa.
Cree un archivo llamado scripts.js en la raíz de su aplicación y agréguele este código:
script.js :
function triggerClick(e) {
  document.querySelector('#profileImage').click();
}
function displayImage(e) {
  if (e.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e){
      document.querySelector('#profileDisplay').setAttribute('src', e.target.result);
    }
    reader.readAsDataURL(e.files[0]);
  }
}
Ahora, cuando el usuario hace clic en el área de imagen redonda, la función triggerClick () activará un evento de clic en el elemento de entrada del archivo oculto. Cuando el usuario selecciona una imagen, se activa un evento onChange en el campo de entrada del archivo y podemos usar la clase FileReader () de JavaScript para mostrar temporalmente la imagen para la vista previa.
Cuando el usuario hace clic en el botón 'Guardar usuario', el formulario de entrada se enviará a la misma página. Entonces, en esa misma página form.php, estamos incluyendo un archivo processForm.php que contiene el código para procesar nuestro formulario.
Entonces, en la carpeta raíz del proyecto, cree un archivo llamado processForm.php;
processForm.php :
<?php
  $msg = "";
  $msg_class = "";
  $conn = mysqli_connect("localhost", "root", "", "img-upload");
  if (isset($_POST['save_profile'])) {
    // for the database
    $bio = stripslashes($_POST['bio']);
    $profileImageName = time() . '-' . $_FILES["profileImage"]["name"];
    // For image upload
    $target_dir = "images/";
    $target_file = $target_dir . basename($profileImageName);
    // VALIDATION
    // validate image size. Size is calculated in Bytes
    if($_FILES['profileImage']['size'] > 200000) {
      $msg = "Image size should not be greated than 200Kb";
      $msg_class = "alert-danger";
    }
    // check if file exists
    if(file_exists($target_file)) {
      $msg = "File already exists";
      $msg_class = "alert-danger";
    }
    // Upload image only if no errors
    if (empty($error)) {
      if(move_uploaded_file($_FILES["profileImage"]["tmp_name"], $target_file)) {
        $sql = "INSERT INTO users SET profile_image='$profileImageName', bio='$bio'";
        if(mysqli_query($conn, $sql)){
          $msg = "Image uploaded and saved in the Database";
          $msg_class = "alert-success";
        } else {
          $msg = "There was an error in the database";
          $msg_class = "alert-danger";
        }
      } else {
        $error = "There was an erro uploading the file";
        $msg = "alert-danger";
      }
    }
  }
?>
Este código recibe los valores de entrada que se enviaron desde el formulario. Esta entrada consiste en la imagen del usuario y la biografía. En el servidor, podemos acceder al archivo de imagen y a toda la información relacionada con la imagen, como el nombre, el tamaño, la extensión, etc. de la imagen en la variable superglobal $ _FILE [] , mientras que otra información como el texto se encuentra en $ _POST []  variable superglobal. 
Usando la información en la variable superglobal $ _FILE [] , podemos validar la imagen. Por ejemplo, nuestro código fuente solo puede aceptar imágenes cuyos tamaños sean inferiores a 200 kb. Por supuesto, siempre puede cambiar este valor si lo desea.
Observa en el código anterior que nos estamos conectando a una base de datos llamada img-upload . Cree esta base de datos y cree una tabla llamada usuarios con los siguientes campos:
tabla de usuarios :
CREATE TABLE `users` (
 `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
 `profile_image` varchar(255) NOT NULL,
 `bio` text NOT NULL
)
Ahora abra el formulario en su navegador e ingrese alguna información. Si todo salió bien, su imagen se cargará en la carpeta de imágenes de su proyecto y el registro correspondiente se guardará en la base de datos.

Mostrar imagen de la base de datos

Una vez que nuestra imagen está en la base de datos, mostrarla es muy fácil. Cree un archivo en la carpeta raíz y asígnele el nombre profiles.php .
profiles.php : 
<?php
  $conn = mysqli_connect("localhost", "root", "", "img-upload");
  $results = mysqli_query($conn, "SELECT * FROM users");
  $users = mysqli_fetch_all($results, MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Image Preview and Upload</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-4 offset-md-4" style="margin-top: 30px;">
        <a href="form.php" class="btn btn-success">New profile</a>
        <br>
        <br>
        <table class="table table-bordered">
          <thead>
            <th>Image</th>
            <th>Bio</th>
          </thead>
          <tbody>
            <?php foreach ($users as $user): ?>
              <tr>
                <td> <img src="<?php echo 'images/' . $user['profile_image'] ?>" width="90" height="90" alt=""> </td>
                <td> <?php echo $user['bio']; ?> </td>
              </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>
¡Simple! Este archivo se conecta a la base de datos, consulta toda la información de perfil de la tabla de usuarios y enumera los perfiles de usuario en un formato tabular que muestra la imagen de perfil de cada usuario con su biografía. Una imagen se muestra simplemente usando el nombre de la imagen de la base de datos y apuntando a la carpeta de imágenes donde reside la imagen.

Conclusión

Espero que hayas disfrutado este breve tutorial. Si tiene alguna pregunta, colóquela en los comentarios a continuación. 
Recuerda apoyar compartiendo.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas