Làm thế nào để hiển thị hình ảnh đã chọn mà không cần gửi dữ liệu đến máy chủ?

Question

Tôi cố gắng để hiển thị các khách hàng một hình ảnh mà ông đã chọn:

<input type="file" onchange="showImage(this)"/> 

Nhưng tôi không thể đọc được giá trị của đầu vào, như tôi đã kiểm tra ra here. Có thể hiển thị hình ảnh không?

Trong onchange Tôi có thể gửi biểu mẫu tới máy chủ và máy chủ có thể gửi lại dữ liệu, nhưng thực sự có cần thiết không? Khách hàng không thể hiển thị dữ liệu mà không có ping-pong đến máy chủ? Đây có phải là vấn đề bảo mật không?

Answer 1

Bạn có thể sử dụng đối tượng FileReader web-api cho điều này, thấy đoạn này:

HTML

<input id="src" type="file"/> // input you want to read from (src) 
<img id="target"/> // image you want to display it (target) 

javascript

function showImage(src,target) { 
    var fr=new FileReader(); 
    // when image is loaded, set the src of the image where you want to display it 
    fr.onload = function(e) { target.src = this.result; }; 
    src.addEventListener("change",function() { 
    // fill fr with image data  
    fr.readAsDataURL(src.files[0]); 
    }); 
} 

var src = document.getElementById("src"); 
var target = document.getElementById("target"); 
showImage(src,target);