Preview รูปภาพก่อนและหลัง Upload ด้วย HTML และ JavaScript

ใช้ FileReader API อ่านไฟล์ แล้วแสดงใน <img>

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="form1">
  <input type="file" id="demo" accept="image/*" />
  <img id="myid" src="#" alt="preview" style="display:none; max-width:300px;" />
</form>

jQuery

function previewImage(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]);
    }
}
$('#demo').change(function() {
    previewImage(this);
});

เมื่อเลือกไฟล์ จะแสดง Preview ทันที ก่อน Upload จริง