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

TIL

741

HTML5

26

Hà Phạm 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