Vì lý do bảo mật, trình duyệt không cho phép truy cập đường dẫn của tệp hình ảnh được chọn thông qua đầu vào, tức là JavaScript trong trình duyệt không có quyền truy cập vào Hệ thống Tệp. Do đó, nhiệm vụ của chúng tôi là xem trước tệp hình ảnh được chọn thông qua đầu vào trước khi chúng tôi gửi nó đến bất kỳ máy chủ nào hoặc bất kỳ nơi nào khác.
Phương pháp 1:Sử dụng lớp URL:
CHÚNG TÔI có thể sử dụng hàm createObjectURL () của lớp URL để tạo url của hình ảnh được chọn bởi đầu vào và sau đó cung cấp url đó cho thuộc tính src của thẻ img.
Ví dụ
Mã cho điều này sẽ là -
<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
const previewImage = e => {
const preview = document.getElementById('preview');
preview.src = URL.createObjectURL(e.target.files[0]);
preview.onload = () => URL.revokeObjectURL(preview.src);
};
</script> Phương pháp 2:Sử dụng lớp FileReader:
Phương thức này sẽ phân tích cú pháp tệp được lấy bởi và sau đó nó sẽ tạo ra một chuỗi có chứa biểu diễn base64 của hình ảnh.
Ví dụ
Mã cho điều này sẽ là -
<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
const previewImage = e => {
const reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = () => {
const preview = document.getElementById('preview');
preview.src = reader.result;
};
};
</script> Đầu ra
Kết quả đầu ra cho cả hai phương thức sẽ như thế này -
