sql >> Database teknologi >  >> RDS >> Mysql

Billedeksempel og upload ved hjælp af PHP og MySQL-database

Brugeroplevelsen kan blive væsentligt forbedret på en billedoverførselsfunktion, hvis vi gør det muligt for brugeren at se et eksempel på det billede, de har valgt, før det faktisk uploades til serveren ved at klikke på upload-knappen.

I denne vejledning vil vi oprette en formular, der tager to input:brugerens profilbillede (billede) og deres biografi (tekst). Når brugeren udfylder formularen og klikker på upload-knappen, vil vi bruge vores PHP-script til at fange formularværdierne (billedet og bio) og gemme billedet i vores projektmappe kaldet billeder. Når billedet er gemt i projektmappen, gemmer vi en post i databasen, der indeholder billednavnet og brugerens biografi.

Efter at have gemt disse oplysninger, vil vi oprette en anden side, der forespørger brugerprofilerne fra databasen, viser dem på siden med hver brugers biografi mod deres profilbillede.

Så lad os komme i gang med implementeringen.

Opret en projektmappe og kald den image-preview-upload. Inde i denne mappe skal du oprette en fil kaldet form.php og en mappe kaldet billeder til lagring af billederne.

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>

Inden jeg siger noget om formularen, lad os først og fremmest oprette en stilfil med navnet main.css til formularen i rodmappen i vores projekt.

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;
}

På den første linje i vores form.php-fil inkluderer vi en fil, der indeholder vores PHP-script, der er ansvarlig for at modtage formularværdierne og behandle dem (det vil sige at gemme billedet i billedmappen og oprette en tilsvarende post i brugertabellen i databasen).

Hvis du tager et kig på formularen, vil du se, at vi indstiller værdien af ​​CSS-egenskabsvisningen til ingen; Vi gør dette, fordi vi ikke ønsker at vise standard HTML-inputelementet til filupload. I stedet vil vi oprette et andet element og style det, som vi ønsker, og når brugeren klikker på vores element, vil vi bruge JavaScript under hætten til at udløse HTML-filindtastningselementet, som er skjult for os.

Lad os nu tilføje de scripts, der er ansvarlige for at udløse filindtastningselementet og derefter også vise billedet til forhåndsvisning.

Opret en fil kaldet scripts.js i roden af ​​din applikation og tilføj denne kode til den:

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]);
  }
}

Når brugeren nu klikker på det runde billedområde, vil funktionen triggerClick() udløse en klikhændelse på det skjulte filindtastningselement. Når brugeren vælger et billede, udløses en onChange-hændelse i filindtastningsfeltet, og vi kan bruge JavaScripts FileReader()-klasse til midlertidigt at vise billedet til forhåndsvisning.

Når brugeren klikker på knappen 'Gem bruger', vil inputformularen blive sendt til samme side. Så på den samme form.php-side inkluderer vi en processForm.php-fil, som indeholder koden til at behandle vores formular.

Så i projektets rodmapp skal du oprette en fil med navnet 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";
      }
    }
  }
?>

Denne kode modtager de inputværdier, der blev indsendt fra formularen. Dette input består af brugerbilledet og bio. På serveren kan vi få adgang til billedfilen og alle relaterede billedoplysninger såsom billednavn, størrelse, filtypenavn osv. i $_FILE[] super globale variabel, mens andre oplysninger såsom tekst findes i $_POST[] superglobal variabel.

Ved at bruge oplysningerne i den superglobale variabel $_FILE[] kan vi validere billedet. For eksempel kan vores kildekode kun acceptere billeder, hvis størrelse er mindre end 200 kb. Du kan selvfølgelig altid ændre denne værdi, hvis du vil.

Du bemærker i koden ovenfor, at vi opretter forbindelse til en database kaldet img-upload. Opret denne database og opret en tabel kaldet brugere med følgende felter:

brugertabel:

CREATE TABLE `users` (
 `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
 `profile_image` varchar(255) NOT NULL,
 `bio` text NOT NULL
)

Åbn nu formularen i din browser og indtast nogle oplysninger. Hvis alt gik godt, vil dit billede blive uploadet til billedmappen i dit projekt og en tilsvarende registrering gemt i databasen.

Visning af billede fra database

Når først vores billede er i databasen, er det en leg at vise det. Opret en fil i rodmappen og navngiv den 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>

Enkel! Denne fil forbinder til databasen, forespørger alle profiloplysninger fra brugertabellen og viser brugerprofilerne i et tabelformat, der viser hver brugers profilbillede mod deres bio. Et billede vises blot ved at bruge billednavnet fra databasen og pege på billedmappen, hvor billedet ligger.

Konklusion

Jeg håber, du nød denne korte tutorial. Hvis du har spørgsmål, så skriv det i kommentarerne nedenfor.

Husk at støtte ved at dele.

God fornøjelse.


  1. Åbn automatisk SQLite-forespørgselsresultater i en teksteditor

  2. SQL DELETE for begyndere

  3. Kan en fremmednøgle være NULL og/eller duplikeret?

  4. Sådan droppes fremmednøglebegrænsning i SQL Server-databasen - SQL Server / TSQL vejledning del 75