Uživatelskou zkušenost lze výrazně zlepšit pomocí funkce nahrávání obrázků, pokud uživateli umožníme zobrazit náhled obrázku, který si vybrali, než jej skutečně nahraje na server kliknutím na tlačítko nahrávání.
V tomto tutoriálu vytvoříme formulář, který bude mít dva vstupy:profilový obrázek uživatele (obrázek) a jeho životopis (text). Když uživatel vyplní formulář a klikne na tlačítko pro nahrávání, použijeme náš skript PHP k zachycení hodnot formuláře (obrázek a životopis) a uložení obrázku do složky našeho projektu s názvem obrázky. Jakmile je obrázek uložen do složky projektu, uložíme do databáze záznam obsahující název obrázku a životopis uživatele.
Po uložení těchto informací vytvoříme další stránku, která se dotazuje na uživatelské profily z databáze, zobrazí je na stránce s biografií každého uživatele proti jeho profilovému obrázku.
Začněme tedy s implementací.
Vytvořte složku projektu a nazvěte ji image-preview-upload. Uvnitř této složky vytvořte soubor s názvem form.php a složku s názvem images pro ukládání obrázků.
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>Než řeknu něco o formuláři, nejprve vytvořte soubor stylu s názvem main.css pro formulář v kořenové složce našeho projektu.
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;
}
Na první řádek našeho souboru form.php vkládáme soubor, který obsahuje náš PHP skript zodpovědný za příjem hodnot formuláře a jejich zpracování (to znamená uložení obrázku do složky obrázky a vytvoření odpovídajícího záznamu v tabulce uživatelů v databázi).
Když se podíváte na formulář, uvidíte, že nastavujeme hodnotu zobrazení vlastnosti CSS na none; Děláme to, protože nechceme zobrazovat výchozí vstupní prvek HTML pro nahrávání souboru. Místo toho vytvoříme jiný prvek a upravíme jej tak, jak chceme, a poté, když uživatel klikne na náš prvek, použijeme pod kapotou JavaScript ke spuštění vstupního prvku souboru HTML, který je nám skrytý.
Nyní přidejte skripty zodpovědné za spouštění vstupního prvku souboru a poté také zobrazení obrázku pro náhled.
V kořenovém adresáři aplikace vytvořte soubor s názvem scripts.js a přidejte do něj tento kód:
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]);
}
}
Když nyní uživatel klikne na kulatou oblast obrázku, funkce triggerClick() spustí událost kliknutí na skrytý vstupní prvek souboru. Když uživatel vybere obrázek, ve vstupním poli souboru se spustí událost onChange a můžeme použít třídu FileReader() JavaScriptu k dočasnému zobrazení obrázku pro náhled.
Když uživatel klikne na tlačítko 'Uložit uživatele', vstupní formulář bude odeslán na stejnou stránku. Takže na stejné stránce form.php vkládáme soubor processForm.php, který obsahuje kód pro zpracování našeho formuláře.
V kořenové složce projektu tedy vytvořte soubor s názvem 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";
}
}
}
?>
Tento kód přijímá vstupní hodnoty, které byly odeslány z formuláře. Tento vstup se skládá z uživatelského obrázku a životopisu. Na serveru máme přístup k souboru obrázku a všem souvisejícím informacím o obrázku, jako je název obrázku, velikost, přípona atd., v super globální proměnné $_FILE[], zatímco ostatní informace, jako je text, najdete v $_POST[] superglobální proměnná.
Pomocí informací v super globální proměnné $_FILE[] můžeme obrázek ověřit. Náš zdrojový kód může například přijímat pouze obrázky, jejichž velikost je menší než 200 kb. Tuto hodnotu můžete samozřejmě kdykoli změnit, pokud chcete.
V kódu výše si všimnete, že se připojujeme k databázi s názvem img-upload. Vytvořte tuto databázi a vytvořte tabulku nazvanou uživatelé s následujícími poli:
tabulka uživatelů:
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)Nyní otevřete formulář ve svém prohlížeči a zadejte nějaké informace. Pokud vše proběhlo v pořádku, váš obrázek bude nahrán do složky obrázků ve vašem projektu a odpovídající záznam bude uložen do databáze.
Zobrazení obrázku z databáze
Jakmile je náš obrázek v databázi, jeho zobrazení je hračka. Vytvořte soubor v kořenové složce a pojmenujte jej 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>
Jednoduchý! Tento soubor se připojuje k databázi, dotazuje se na všechny profilové informace z tabulky uživatelů a uvádí uživatelské profily v tabulkovém formátu zobrazující profilový obrázek každého uživatele s jeho biografií. Obrázek se zobrazí jednoduše pomocí názvu obrázku z databáze a ukázání na složku obrázků, kde je obrázek umístěn.
Závěr
Doufám, že se vám tento krátký návod líbil. Pokud máte nějaké dotazy, napište je do komentářů níže.
Nezapomeňte podpořit sdílením.
Mějte se krásně.