Потребителското изживяване може да бъде значително подобрено с функцията за качване на изображения, ако дадем възможност на потребителя да визуализира изображението, което е избрал, преди действително да го качи на сървъра, като щракне върху бутона за качване.
В този урок ще създадем формуляр, който приема два входа:снимка на потребителския профил (изображение) и неговата биография (текст). Когато потребителят попълни формуляра и щракне върху бутона за качване, ние ще използваме нашия PHP скрипт, за да вземем стойностите на формуляра (изображението и биографията) и да запазим изображението в папката на нашия проект, наречена изображения. След като изображението бъде запазено в папката на проекта, ние ще съхраняваме запис в базата данни, съдържащ името на изображението и биографията на потребителя.
След като запазим тази информация, ще създадем друга страница, която прави заявки за потребителските профили от базата данни и ги показва на страницата с биографията на всеки потребител срещу снимката на потребителския му профил.
Така че нека започнем с внедряването.
Създайте папка на проекта и я наречете image-preview-upload. В тази папка създайте файл, наречен form.php, и папка, наречена images, за съхраняване на изображенията.
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>Преди да кажа нещо за формуляра, нека първо създадем файл за стилизиране с име main.css за формуляра в основната папка на нашия проект.
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;
}
На първия ред на нашия файл form.php включваме файл, който съдържа нашия PHP скрипт, отговорен за получаването на стойностите на формуляра и обработката им (тоест запазване на изображението в папката с изображения и създаване на съответен запис в таблицата с потребители в базата данни).
Ако погледнете формуляра, ще видите, че задаваме стойността на показването на свойството CSS на none; Правим това, защото не искаме да показваме входния HTML елемент по подразбиране за качване на файл. Вместо това ще създадем различен елемент и ще го стилизираме така, както искаме и след това, когато потребителят щракне върху нашия елемент, ще използваме JavaScript под капака, за да задействаме елемента за въвеждане на HTML файл, който е скрит за нас.
Сега нека добавим скриптовете, отговорни за задействането на елемента за въвеждане на файл и след това за показване на изображението за визуализация.
Създайте файл, наречен scripts.js, в корена на приложението си и добавете този код към него:
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]);
}
}
Сега, когато потребителят щракне върху областта на кръглото изображение, функцията triggerClick() ще задейства събитие за щракване върху скрития елемент за въвеждане на файл. Когато потребителят избере изображение, в полето за въвеждане на файла се задейства събитие onChange и можем да използваме класа FileReader() на JavaScript, за да покажем временно изображението за визуализация.
Когато потребителят щракне върху бутона „Запазване на потребителя“, формулярът за въвеждане ще бъде изпратен на същата страница. Така че на същата страница form.php включваме файл processForm.php, който съдържа кода за обработка на нашия формуляр.
Така че в основната папка на проекта създайте файл с име 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";
}
}
}
?>
Този код получава входните стойности, които са изпратени от формуляра. Този вход се състои от изображението на потребителя и биографията. На сървъра имаме достъп до файла с изображението и цялата свързана информация за изображението, като име на изображението, размер, разширение и т.н. в суперглобалната променлива $_FILE[], докато друга информация, като текст, се намира в $_POST[] суперглобална променлива.
Използвайки информацията в суперглобалната променлива $_FILE[], можем да потвърдим изображението. Например, нашият изходен код може да приема само изображения, чиито размери са по-малки от 200 kb. Разбира се, винаги можете да промените тази стойност, ако желаете.
Забелязвате в кода по-горе, че се свързваме с база данни, наречена img-upload. Създайте тази база данни и създайте таблица, наречена потребители със следните полета:
таблица с потребители:
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)Сега отворете формуляра във вашия браузър и въведете малко информация. Ако всичко е минало добре, вашето изображение ще бъде качено в папката с изображения във вашия проект и съответен запис ще бъде запазен в базата данни.
Показване на изображение от базата данни
След като нашето изображение е в базата данни, показването му е лесно. Създайте файл в основната папка и го наименувайте 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>
Просто! Този файл се свързва с базата данни, запитва цялата информация за профилите от таблицата на потребителите и изброява потребителските профили в табличен формат, показвайки изображението на потребителския профил спрямо неговата биография. Изображението се показва просто като се използва името на изображението от базата данни и се насочва към папката с изображения, където се намира изображението.
Заключение
Надявам се, че сте харесали този кратък урок. Ако имате въпроси, пуснете ги в коментарите по-долу.
Не забравяйте да подкрепите, като споделите.
Приятно прекарване.
