Display preview selected image in input by using JQuery

Today now in this post i will talk with about Display preview selected image in input type file using JQuery. Sometimes you need to show preview of our image before image upload.Here I mean when any user will select a new image from the input=”file” then it will display the preview of image.

So now in this example we can know about before upload how it will display preview by using jquery.

<html lang="en">
    <title>Change image on select new image from file input</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<input type="file" name="file" id="profile-img">
<img src="" id="profile-img-tag" width="200px" />

<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#profile-img-tag').attr('src', e.target.result);


Read Also: Generate Captcha code and Validation by using BotDetect package in laravel

Thanks for read. I hope it help you. For more you can follow us on facebook


About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →