Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Preview image JS - Preview image trước khi upload file Javascript

@devnavSep 18, 20212 min read...

Source Code

Mình xin giới thiệu cách để chúng ta preview image với Javascript nhé. Đầu tiên chúng ta design một chút. Giao diện của chúng ta nhìn sẽ như thế này:

upload_File_Preview_Img

Phần html khá đơn giản:

<div class="container">
  <div class="preview">
    <img id="img-preview" src="./img.jpg" />

    <label for="file-input">Upload Image</label>
    <input accept="image/*" type="file" id="file-input" />
  </div>
</div>

Trong input mình sử dụng accept="image/*", nó có nghĩa là chỉ chấp nhận các file dạng hình ảnh.

Tiếp theo ta đến với phần css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: rgb(255, 240, 222);
}

#file-input {
    display: none;
}

.preview {
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    max-width: 350px;
    margin: auto;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 20px rgba(170, 170, 170, 0.2);
}

img {
    width: 100%;
    object-fit: cover;
    margin-bottom: 20px;
}

label {
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    border-radius: 8px;
    padding: 10px 20px;
    background-color: rgb(101, 101, 255);
}

Cuối cùng ta được như bên dưới:

Phần Javascript:

const input = document.getElementById('file-input');
const image = document.getElementById('img-preview');

input.addEventListener('change', (e) => {
    if (e.target.files.length) {
        const src = URL.createObjectURL(e.target.files[0]);
        image.src = src;
    }
});

Mình đã sử dụng URL.createObjectURL và truyền vào đó một File object. Kết quả nhận được là một DOMString chứa một object URL. Từ đây mình có thể sử dụng nó để hiển thị hình ảnh bằng cách gán vào src của thẻ <img>. Đây chính là cách mình muốn giới thiệu cho các bạn.

Cách làm khá đơn giản đúng không nào. Cuối cùng, mình xin chúc các bạn có một ngày học tập vui vẻ và hiệu quả. Cùng gặp lại ở bài viết tiếp theo nhé ^^.

Một số bài viết nên đọc: