Display image to be loaded PHP

Question

Hello I would like to know how to display an image that is to be loaded into a INPUT FILE

For example, when the user clicks to upload the image and after selecting it how do I view an image Preview before the form Ubmit?

Answer 1

This approach solves this problem in a simple way using only jquery:

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<input id="imgInput" type="file">
<script>
$("#imgInput").change(function(){
    if (this.files && this.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#view-img').attr('src', e.target.result);
        }
        reader.readAsDataURL(this.files[0]);
    }
});
</script>

<img id="view-img" src="default.jpg">