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!

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:

  1. Custom ChartJS, tạo biểu đồ cực nhanh với ChartJS
  2. Làm việc với JSON - lấy dữ liệu file JSON từ local
  3. Cách làm Infinite Scroll sử dụng Vanilla JavaScript
Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.