Tạo Chức Năng Preview Image Upload Javascript

Tạo Chức Năng Preview Image Upload Javascript


Ngày 29 Tháng 10 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo chức năng xem hình ảnh trước khi tải lên bằng Jaavascript cho website nhé.

Preview Image Before Upload HTML CSS JavaScript

HTML

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML cho tính năng xem trước hình ảnh thông qua đoạn code dưới đây nha:

<!DOCTYPE html>
<html lang="vi">
   <head>
      <meta charset="utf-8">
      <title>preview image before upload in html css javascript</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="container">
         <div class="wrapper">
            <div class="image">
               <img src="" alt="Image">
            </div>
            <div class="content">
               <div class="icon">
                  <i class="fas fa-cloud-upload-alt"></i>
               </div>
               <div class="text">
                    Chọn Hình Ảnh Bằng Nút Bên Dưới
               </div>
            </div>
            <div id="cancel-btn">
               <i class="fas fa-times"></i>
            </div>
            <div class="file-name">
                Tên File
            </div>
         </div>
         <button onclick="defaultBtnActive()" id="custom-btn">Chọn Hình Ảnh</button>
         <input id="default-btn" type="file" hidden>
      </div>
   </body>
</html>

CSS

Tiếp theo mình sẽ đi vào thiết lập CSS thông qua các thuộc tính để giúp chức năng upload file này được đẹp hơn bằng đoạn mã bên dưới nha:

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];500;700&display=swap'); *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
}
.container{
  height: 350px;
  width: 430px;
  position: relative;
}
.container .wrapper{
  position: relative;
  height: 300px;
  width: 100%;
  border-radius: 10px;
  background: #fff;
  border: 2px dashed #c2cdda;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.wrapper.active{
  border: none;
}
.wrapper .image{
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.wrapper .icon{
  font-size: 100px;
  color: #9658fe;
}
.wrapper .text{
  font-size: 20px;
  font-weight: 500;
  color: #5B5B7B;
}
.wrapper #cancel-btn i{
  position: absolute;
  font-size: 20px;
  right: 15px;
  top: 15px;
  color: #FF1493;
  cursor: pointer;
  display: none;
}
.wrapper.active:hover #cancel-btn i{
  display: block;
}
.wrapper #cancel-btn i:hover{
  color: #FF1493;
}
.wrapper .file-name{
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 8px 0;
  font-size: 18px;
  color: #fff;
  display: none;
  background: linear-gradient(135deg,#00008B 0%,#00BFFF 100%);
}
.wrapper.active:hover .file-name{
  display: block;
}
.container #custom-btn{
  margin-top: 30px;
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  border-radius: 25px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(135deg,#00008B 0%,#00BFFF 100%);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

Kết quả bạn xem hình ảnh bên dưới nha!

Preview image js

Javascript

Bước cuối cùng chúng ta sẽ đi vào viết mã javascript để chức năng này hoạt động thông qua đoạn code ở dưới đây nha:

const wrapper = document.querySelector(".wrapper");
const fileName = document.querySelector(".file-name");
const defaultBtn = document.querySelector("#default-btn");
const customBtn = document.querySelector("#custom-btn");
const cancelBtn = document.querySelector("#cancel-btn i");
const img = document.querySelector("img");
let regExp = /[0-9a-zA-Z\^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_ ]+$/;
function defaultBtnActive(){
  defaultBtn.click();
}
defaultBtn.addEventListener("change", function(){
  const file = this.files[0];
  if(file){
    const reader = new FileReader();
    reader.onload = function(){
      const result = reader.result;
      img.src = result;
      wrapper.classList.add("active");
    }
    cancelBtn.addEventListener("click", function(){
      img.src = "";
      wrapper.classList.remove("active");
    })
    reader.readAsDataURL(file);
  }
  if(this.value){
    let valueStore = this.value.match(regExp);
    fileName.textContent = valueStore;
  }
});

Kết quả bạn xem video bên dưới nha.

Còn dưới đây là dự án trên Codepen nha.

See the Pen Untitled by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo các thư viện upload file thì truy cập đường dẫn bên dưới nha.
Thư Viện Upload File

Nếu bạn muốn tham khảo các ví dụ file upload html5 thì truy cập đường dẫn bên dưới nha.
File Upload HTML5

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách xây dựng chứ năng preview image bằng javascript cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!