Select and display image(s) using FileReader using Jquery.

HTML CODE:

<input class="joint" type='file' id="imgInp" />

<img style="width:45px" id="blah" src="#" alt="your image" />

Jquery CODE:

<script type="text/javascript">

$("#imgInp").change(function()

{

    readURL(this);

});

function readURL(input) {

    if (input.filers && input.files[0]) {

        var reader = new FileReader();

           reader.onload = function (e) {

            $('#blah').attr('src', e.target.result);

        }

       reader.readAsDataURL(input.files[0]);

    }

}

</script>

 Second method:

<div class="form-group">

            <label class="control-label col-sm-2">Room image:</label>

            <div class="col-sm-8">

                <input type="file" id="UploadImage" class="form-control" name="roomImage" title="Load                     Image" onchange="DisplayImage(this)"/>

                

                <img id="imgRoom" height="100" width="100" style="border:solid" />

            </div>

        </div>

Jquery:

<script type="text/javascript">

    $(document).ready(function () {

    });

    function DisplayImage(res) {

        if (res.files && res.files[0]) {

            var reader = new FileReader();

            reader.onload = function (e) {

                $("#imgRoom").attr("src", e.target.result);

            }

            reader.readAsDataURL(res.files[0]);

        }

    }

</script>