Hướng dẫn html file upload preview - bản xem trước tải lên tệp html

Đã đăng vào thg 9 17, 2019 2:32 SA 2 phút đọc 2 phút đọc

1. Giới thiệu

Chúng ta chắc chắn là không lạ gì với input file mọi chuyện vẫn sẽ ổn nếu 1 ngày design muốn bạn làm nó đẹp hơn, có thể preview và xoá ảnh, ví dụ như này

2. Lý thuyết

2.1. Ý tưởng

Chúng ta sẽ thay thế ô input file mặc định bằng thứ giống cái nút Upload như hình trên. Kiểm tra đuôi file xem có phải định dạnh ảnh khi upload không, chọn rồi thì lặp value lấy ra đường dẫn và tên ảnh, lúc này nút Clear all mới show ra, để xoá toàn bộ ảnh và value input

2.2. Html, css

Các bạn có thể search cách custom hiển thị input upload dễ dàng bằng những tứ khoá dạng "custom input file css", sẽ có vô vàn hướng dẫn, css đẹp và hiệu ứng thú vị, ở đây mình chỉ làm cách đơn giản để hiểu bản chất: chúng ta sẽ ẩn ô input mặc định đi, thay thế bằng 1 nút hay ảnh upload gì đó tuỳ bạn css, và làm sao để khi click vào cái nút mới đó thì cũng đồng nghĩa với việc click vào input file. Để làm việc này chúng ta sẽ dùng label for, input file các bạn để id và thuộc tính for của label trùng với id input là được. Html css cụ thể thì các bạn tự xem code trong link cuối bài nhé.

2.3. Js

Để hiển thị ảnh thì chúng ta sẽ lấy đường dẫn ảo tới ảnh, cho vào thẻ img hoặc dùng background-image để css cho dễ tuỳ các bạn. Để đọc được thì ta dùng FileReader có sẵn của Jquery. Code các bạn cũng tự xem nhé, nó khá dễ hiểu và cũng không có nhiều để giải thích, chỉ lưu ý là khi upload không phải định dạng ảnh, alert ra thông báo lỗi thì value vẫn được thêm vào, nên phải reset value khi lỗi, và cả khi Clear all ảnh.

3. Kết luận

Thành quả:

Hãy sáng tạo thêm cho đẹp nhé! Có gì sai mong mọi người góp ý để tính năng được hoàn thiện!

All rights reserved

Trên đây là những cách thông dụng nhất để preview file thông qua các đối tượng của Web API. Nói chung thì nó thật sự thú vị và cũng rất có ích anh em nhỉ . Với những phương thức trên ta hoàn toàn có thể làm được nhiều hơn nữa. Học tập sẽ không bao giờ có điểm dừng nhỉ . Cảm ơn anh em đã đọc bài viết này. Chúc anh em thành công nhé . 3 phút đọc

Repo tại đây

. Trước khi upload 1 file lên server, anh em có thường thắc mắc là nó đã thực sự ổn áp hay chưa và cũng muốn xem sơ qua nó như thế nào chẳng hạn ? Vì vậy hôm nay chúng ta cùng xem một vài cách để giải quyết vấn đề đó và cụ thể là preview file dạng image nhé. Bắt đầu

1. Chuẩn bị

Một vài kiến thức cần biết:

• Javascript (tất nhiên rồi)
• Html

Môi trường sẽ demo:

• Window 10
• Visual studio code 1.41.1
• Google Chrome 80.0.3987.106

2. Tiến hành

Với việc preview image file mình sẽ thường dùng 2 cách sau

1. FileReader (Web API) thường được dùng để đọc nội dung của các file được lưu trữ trên máy tính của người dùng thông qua thao tác với các đối tượng File hoặc Blob.
2. window.URL (Web API) và các phương thức tĩnh của nó để thao tác với các đối tượng File hay Blob

Sử dụng FileReader

1. Trước tiên ta sẽ cần tạo 1 vài đoạn HTML

2. Tạo một hàm để thực hiện việc đọc nội dung của file và preview nó

Hình dung các bước như sau:

1. Khi chọn 1 file sẽ gọi hàm previewFile
2. Lấy thông tin file và phần tử preview
3. Tạo đối tượng FileReader
4. Tiến hành đọc file thông qua phương thức readAsDataURL
5. Sau khi hoàn thành sẽ gọi hàm onload của reader
6. Tạo phần tử image và thiết lập thuộc tính Blob0 và gán bằng dữ liệu Blob1 của Blob2 result
7. Chèn image vào phần tử preview

3. Chạy thử xem sao

Hình dung các bước như sau:

1. Khi chọn 1 file sẽ gọi hàm previewFile
2. Lấy thông tin file và phần tử preview
3. Tạo đối tượng FileReader
4. Tiến hành đọc file thông qua phương thức readAsDataURL
5. Chèn image vào phần tử preview
6. 3. Chạy thử xem sao

3. Chạy thử xem sao

Giải phóng tham chiếu object url ở bước 3 thông qua phương thức tĩnh Blob5 của Blob6

Preview nhiều file

1. Ta sẽ thêm thuộc tính File2 cho input file để có thể chọn nhiều file 1 lần.

2. Sử dụng FileReader

3. Sử dụng window.URL

3. Tổng kết