{tocify} $title={Table of Contents}
Vấn đề hiển thị hình ảnh trên HTML
Như các bạn đã biết các website cổ điển của công ty có phần quản lý nhân sự. Trong mục thêm nhân sự thì hình ảnh chân dung của nhân viên đính kèm khi thêm mới chỉ là tên ảnh. Hình ảnh khi thêm mới không được hiển thị ngay lập tức, và giao diện thường cổ điển, không sinh động bắt mắt.
Dùng jQuery để hiển thị hình ảnh lên HTML
Trong bài viết này, tôi sẽ chia sẻ cho tất cả các bạn cách thay đổi và tuỳ chỉnh giao diên hiển thị của thẻ Input File, và cách hiển thị hình ảnh ngay lập tức lên thẻ Image trong HTML. Kỹ thuật này sẽ dùng một đoạn code của jQuery, nên các bạn chịu khó tìm hiểu sơ sơ về jQuery để nắm được đoạn chương trình và hiểu hết bài viết này nhé.
Thiết kế giao diện HTML
Điều đầu tiên chúng ta luôn luôn làm là tạo một dự án mới, tiếp theo là thêm mới một file index.html với đoạn code mẫu bên dưới:
<!-- index.html --> <!DOCTYPE html> <html> <head> <title>Get & Live Show Image Using jQuery In HTML</title> <meta charset="utf-8"> </head> <body> <div class="container-xl"> <h1 style="text-align: center; margin: 30px;">Get & Live Show Image Using jQuery In HTML</h1> <div class="thumb"> <img id="imgSrc" src="no-thumb.jpg"> <div id="uploadCover" class="thumb-cover"> <i class="fa fa-plus-square"></i> <input type="file" name="HinhAnh" id="imgUpload" accept="image/*" title="Click để thay đổi hình ảnh!"> </div> </div> </div> </body> </html>
Chạy thử xem dự án có hoạt động không nhé, cam đoan là nhìn thấy hơi tệ, nhưng chúng ta tiếp tục làm đẹp cho em nó nhé.
Thêm thư viện Bootstrap, jQuery và CSS vào giao diện
Để có thể sử dụng jQuery và hiển thị biểu tượng cho đoạn code <i class="fa fa-plus-square"></i> ta phải thêm 2 thư viện này vào trong thẻ <head>.
<head>
<title>Styling & Customizing File Inputs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>Tới đây chúng ta chỉ mới hoàn tất công đoạn khung sườn cho trang của mình. Để thay được giao diện như mong muốn ta phải thực hiện một số thao tác như:
- Định kích thước, chọn loại hiển thị, canh trái phải, ... cho class .thumb
- Định kích thước, vị trí xuất hiện, màu nền cho class .thumb-cover
- Định kích thước cho thẻ i, chọn màu, vị trí hiển thị của thẻ i
- Cấu hình một số thuộc tính cho thẻ Input File
và ... các bước chạy thử nghiệm để tạo ra được một đoạn CSS:
<style type="text/css">
.thumb{
width: 520px;
height: 360px;
display: block;
overflow: hidden;
margin-left: auto;
margin-right: auto;
box-shadow: 1px 1px 5px #999;
border-radius: 20px;
}
.thumb img{
float: left;
width: 100%;
height: 100%;
}
.thumb .thumb-cover{
width: 520px;
height: 360px;
position: absolute;
display: none;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.3);
}
.thumb:hover .thumb-cover{
display: flex;
}
.thumb i{
color: #00d0ff;
font-size: 55px;
width: 100%;
text-align: center;
margin-top: calc(50% - 100px);
}
input#imgUpload {
top: 0;
left: 0;
cursor: pointer;
width: 100%;
height: 100%;
position: absolute;
display: inline-block;
opacity: 0;
}
</style>Xong công đoạn thêm đoạn CSS này vào, thì chúng ta đã hoàn tất phần giao diện cho chương trình rồi ạ. Bây giờ chúng ta chạy thử lại xem trang của chúng ta sẽ ra thế nào nhé.
Wow, hoan hô giao diện đã đúng như đề bài ban đầu đã đưa ra rùi. Nhưng chỉ mới là giao diện thoy ạ, chưa hiển thị lên được hình ảnh khi ta chọn đâu. Tới đây chúng ta lại tiếp tục phải nhờ vã anh jQuery làm tiếp thôi.
Xây dựng hàm hiển thị hình bằng bằng jQuery
Nội dung nhờ vã: anh jQuery giám sát dùm em, nếu như có chị Input File nào nhất cử nhất động (nói rõ ra là có thay đổi trạng thái như là lấy hình ảnh lên). Thì anh phải ngay lập tức chụp hình nó lại, rồi gửi lên cho em xem liền. Và phần lót tay của em gửi cho anh jQuery đây ạ:
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imgSrc').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgUpload").change(function() {
readURL(this);
});
</script>
Phần code này các bạn đặt cuối chương trình nhé.Nếu các bạn muốn xem mỗi đoạn code CSS trên có tác động thế nào đến chương trình, thì các bạn nên chạy từng phần.
Nếu bạn muốn lấy nguồn hoàn chỉnh, xin vui lòng ghi địa chỉ email của bạn vào phần nhận xét. Chúng tôi sẽ gửi cho bạn bộ nguồn hoàn chỉnh theo địa chỉ email của bạn.