Xóa bài viết
Bạn có chắc chắn muốn xóa bài viết này không ?
Xóa bình luận
Bạn có chắc chắn muốn xóa bình luận này không ?
Lấy fake path của file trong html input
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

{{ comment.user.name }}
Bỏ hay
Hay

Cùng một tác giả

45
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...

38
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...

33
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...
Bài viết liên quan

1
5
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 ...

4
0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...

25
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)...