Lấy fake path của file trong html input
TIL
633
HTML5
27
White

Hoàng Duy viết ngày 23/06/2016

Lấy fake path của file trong html input

Ngữ cảnh: em cần làm một cái nút tải ảnh lên có preview.

GIải pháp đầu: Dùng FileReader đọc file ảnh thành base64 rồi ném vào url của phần tử img

let reader = new FileReader()

reader.onloadend = () => {
    imgElem.setAttribute('src', reader.result);
};

reader.readAsDataURL(input.files[0]);

Tuy nhiên tốn nhiều chữ, may mà có URL api cho phép lấy fake path (blob) của file ấy dễ hơn

let url = URL.createObjectURL(input.files[0]);
imgElem.setAttribute('src', url);

Mất có 2 dòng lại còn synchronize, trẻ con đọc cũng hiểu. Độ phủ trên trình duyệt là tương đương.

Note

Good practice là cần gọi revokeObjectURL khi đã xong việc với cái file ấy rồi, dù trình duyệt tự clear khi page unload, nhưng những người chuyên nghiệp không nên để lại quá nhiều dấu vết, phải không nhỉ.

mahpahh 09-05-2016

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hoàng Duy

25 bài viết.
66 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
43 8
Xin chào, đây là lần đầu tiên mình post bài ở đây. Nhiều vấn đề mình cũng không rành lắm, có gì sai mọi người góp ý nhé. Xin cảm ơn :D Bài này gi...
Hoàng Duy viết hơn 3 năm trước
43 8
White
33 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết 3 năm trước
33 8
White
32 3
Đây là một trong các concept mới đối tượng mới được đưa vào ECMAScript 6. Việc sử dụng chúng rất dễ nhưng để hiểu được thì (đối với tôi) cũng cần k...
Hoàng Duy viết hơn 3 năm trước
32 3
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 5 tháng trước
0 2
White
20 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết 2 năm trước
20 1
White
9 0
Có một tuyên ngôn cho chủ nghĩa tối giản trong ngành phần mềm. Link: http://minifesto.org/ Fight for Pareto's law, look for the 20% of effort th...
Cẩm Huỳnh viết 2 tháng trước
9 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
25 bài viết.
66 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!