Đã đă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
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
- 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ặcBlob
. - 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
hayBlob
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:
- Khi chọn 1 file sẽ gọi hàm
previewFile
- Lấy thông tin file và phần tử
preview
- Tạo đối tượng
FileReader
- Tiến hành đọc file thông qua phương thức
readAsDataURL
- Sau khi hoàn thành sẽ gọi hàm
onload
của reader - Tạo phần tử
image
và thiết lập thuộc tínhBlob
0 và gán bằng dữ liệuBlob
1 củaBlob
2 result - Chèn image vào phần tử preview
3. Chạy thử xem sao
Hình dung các bước như sau:
- Khi chọn 1 file sẽ gọi hàm
previewFile
- Lấy thông tin file và phần tử
preview
- Tạo đối tượng
FileReader
- Tiến hành đọc file thông qua phương thức
readAsDataURL
- Chèn image vào phần tử preview
- 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 Blob
5 của Blob
6
Preview nhiều file
1. Ta sẽ thêm thuộc tính File
2 cho input file để có thể chọn nhiều file 1 lần.
2. Sử dụng FileReader
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. Sử dụng window.URL
3. Tổng kết