แสดง Preview รูปภาพแทนปุ่ม Choose File ใน input type=file accept=image/* capture=camera

ใช้ FileReader API แสดง Preview

HTML

<form id="myform">
  <input type='file' id="myimg" accept="image/*" capture="environment" />
  <img id="myid" src="#" alt="new image" style="display:none; max-width:200px;" />
</form>

JavaScript

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#myid').attr('src', e.target.result).show();
        };
        reader.readAsDataURL(input.files[0]);
    }
}
$("#myimg").change(function() {
    readURL(this);
});

เมื่อผู้ใช้เลือกรูป จะแสดง Preview ทันที แทนที่จะเห็นแค่ชื่อไฟล์