Trải nghiệm người dùng có thể được cải thiện đáng kể trên tính năng tải lên hình ảnh nếu chúng tôi cho phép người dùng xem trước hình ảnh họ đã chọn trước khi thực sự tải nó lên máy chủ bằng cách nhấp vào nút tải lên.
Trong hướng dẫn này, chúng tôi sẽ tạo một biểu mẫu có hai đầu vào:ảnh hồ sơ của người dùng (hình ảnh) và tiểu sử của họ (văn bản). Khi người dùng điền vào biểu mẫu và nhấp vào nút tải lên, chúng tôi sẽ sử dụng tập lệnh PHP để lấy các giá trị biểu mẫu (hình ảnh và tiểu sử) và lưu hình ảnh trong thư mục dự án của chúng tôi được gọi là hình ảnh. Sau khi hình ảnh được lưu trong thư mục dự án, chúng tôi sẽ lưu trữ một bản ghi trong cơ sở dữ liệu có chứa tên hình ảnh và tiểu sử của người dùng.
Sau khi lưu thông tin này, chúng tôi sẽ tạo một trang khác truy vấn hồ sơ người dùng từ cơ sở dữ liệu hiển thị họ trên trang với tiểu sử của từng người dùng dựa trên ảnh hồ sơ của họ.
Vì vậy, hãy bắt đầu với việc triển khai.
Tạo một thư mục dự án và gọi nó là hình ảnh-xem trước-tải lên. Bên trong thư mục này, hãy tạo một tệp có tên là form.php và một thư mục có tên là hình ảnh để lưu trữ hình ảnh.
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>Trước khi tôi nói bất cứ điều gì về biểu mẫu, trước hết chúng ta hãy tạo một tệp tạo kiểu có tên là main.css cho biểu mẫu trong thư mục gốc của dự án của chúng tôi.
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;
}
Trên dòng đầu tiên của tệp form.php, chúng tôi đang bao gồm một tệp có chứa tập lệnh PHP chịu trách nhiệm nhận các giá trị biểu mẫu và xử lý chúng (nghĩa là, lưu hình ảnh trong thư mục images và tạo bản ghi tương ứng trong bảng người dùng trong cơ sở dữ liệu).
Nếu bạn nhìn vào biểu mẫu, bạn sẽ thấy rằng chúng tôi đang đặt giá trị của hiển thị thuộc tính CSS thành không có; Chúng tôi đang làm điều này vì chúng tôi không muốn hiển thị phần tử đầu vào HTML mặc định để tải lên tệp. Thay vào đó, chúng tôi sẽ tạo một phần tử khác và tạo kiểu cho nó theo cách chúng tôi muốn và sau đó khi người dùng nhấp vào phần tử của chúng tôi, chúng tôi sẽ sử dụng JavaScript để kích hoạt phần tử đầu vào tệp HTML mà chúng tôi ẩn.
Bây giờ, hãy thêm các tập lệnh chịu trách nhiệm kích hoạt phần tử đầu vào tệp và sau đó cũng hiển thị hình ảnh để xem trước.
Tạo một tệp có tên scripts.js trong thư mục gốc của ứng dụng của bạn và thêm mã này vào tệp đó:
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]);
}
}
Bây giờ khi người dùng nhấp vào vùng hình tròn, hàm triggerClick () sẽ kích hoạt sự kiện nhấp vào phần tử đầu vào tệp ẩn. Khi người dùng chọn một hình ảnh, sự kiện onChange sẽ được kích hoạt trên trường nhập tệp và chúng ta có thể sử dụng lớp FileReader () của JavaScript để tạm thời hiển thị hình ảnh để xem trước.
Khi người dùng nhấp vào nút 'Lưu người dùng', biểu mẫu đầu vào sẽ được gửi đến cùng một trang. Vì vậy, trên cùng trang form.php đó, chúng tôi đang bao gồm một tệp processForm.php chứa mã để xử lý biểu mẫu của chúng tôi.
Vì vậy, trong thư mục gốc của dự án, hãy tạo một tệp có tên 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";
}
}
}
?>
Mã này nhận các giá trị đầu vào đã được gửi từ biểu mẫu. Đầu vào này bao gồm hình ảnh người dùng và tiểu sử. Trên máy chủ, chúng tôi có thể truy cập tệp hình ảnh và tất cả thông tin hình ảnh liên quan như tên hình ảnh, kích thước, phần mở rộng, v.v., trong biến siêu toàn cục $ _FILE [] trong khi thông tin khác như văn bản được tìm thấy trong $ _POST [] biến superglobal.
Sử dụng thông tin trong biến siêu toàn cục $ _FILE [], chúng tôi có thể xác thực hình ảnh. Ví dụ:mã nguồn của chúng tôi chỉ có thể chấp nhận hình ảnh có kích thước nhỏ hơn 200kb. Tất nhiên, bạn luôn có thể thay đổi giá trị này nếu muốn.
Bạn nhận thấy trong đoạn mã trên rằng chúng tôi đang kết nối với cơ sở dữ liệu có tên img-upload. Tạo cơ sở dữ liệu này và tạo một bảng được gọi là người dùng với các trường sau:
bảng người dùng:
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)Bây giờ, hãy mở biểu mẫu trên trình duyệt của bạn và nhập một số thông tin. Nếu mọi thứ suôn sẻ, hình ảnh của bạn sẽ được tải lên thư mục hình ảnh trong dự án của bạn và một bản ghi tương ứng được lưu trong cơ sở dữ liệu.
Hiển thị hình ảnh từ cơ sở dữ liệu
Khi hình ảnh của chúng tôi đã có trong cơ sở dữ liệu, việc hiển thị nó thật dễ dàng. Tạo một tệp trong thư mục gốc và đặt tên là 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>
Giản dị! Tệp này kết nối với cơ sở dữ liệu, truy vấn tất cả thông tin hồ sơ từ bảng người dùng và liệt kê hồ sơ người dùng ở định dạng bảng hiển thị hình ảnh hồ sơ của mỗi người dùng dựa trên tiểu sử của họ. Hình ảnh được hiển thị đơn giản bằng cách sử dụng tên hình ảnh từ cơ sở dữ liệu và trỏ tới thư mục hình ảnh nơi hình ảnh đó.
Kết luận
Tôi hy vọng bạn thích hướng dẫn ngắn này. Nếu bạn có bất kỳ câu hỏi nào, hãy thả nó vào phần bình luận bên dưới.
Nhớ ủng hộ bằng cách chia sẻ.
Chúc các bạn có một khoảng thời gian vui vẻ.
