Today in this article we are going to see how to display the uploaded image in html using javascript and jquery.
Sometime while we are going to upload the image from backend, we need to check which image is getting uploaded into the server, for that we need to display the selected image just below the image input area.
Lets get started
What are we going to ?
- Create simple HTML page with form input.
- Write some javascript to read the selected image and display it in HTML image tag.
So lets start by creating a simple HTML page with image input. I will just use bootstrap and its panel class to give it a elegant look.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Display Uploaded Image in HTML Using Javascript</title> <link rel="stylesheet" href="{{url('bootstrap')}}/css/bootstrap.min.css"> <link rel="stylesheet" href="{{url('bootstrap')}}/css/bootstrap-theme.min.css"> <script src="{{url('bootstrap')}}/jquery-3.2.1.js"></script> <script src="{{url('bootstrap')}}/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="padding-top:20px;"> <div class="col-md-7 col-md-offset-2"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Display Uploaded Image Tutorial</h3> </div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <form action="" method="POST" role="form" enctype="multpart/form-data"> <div class="form-group"> <label for="">Choose Image</label> <input type="file" class="form-control" name="image" id="image"> </div> <div class="form-group"> <img id="show_image" width="300"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </div> </div> </div> <body> </html> |
Now, as we have created the input field take a note on the id of the both the field. We are using them to read the input and display the image.
Now comes the javascript and jQuery into play.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#show_image').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#image").change(function(){ readURL(this); }); |
If you still have problem to browse and uploading image in html form then you might want to take a whole source code below and use it in plain HTML. It works without any issue.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Display Uploaded Image in HTML Using Javascript</title> <link rel="stylesheet" href="{{url('bootstrap')}}/css/bootstrap.min.css"> <link rel="stylesheet" href="{{url('bootstrap')}}/css/bootstrap-theme.min.css"> <script src="{{url('bootstrap')}}/jquery-3.2.1.js"></script> <script src="{{url('bootstrap')}}/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="padding-top:20px;"> <div class="col-md-7 col-md-offset-2"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Display Uploaded Image Tutorial</h3> </div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <form action="" method="POST" role="form" enctype="multpart/form-data"> <div class="form-group"> <label for="">Choose Image</label> <input type="file" class="form-control" name="image" id="image"> </div> <div class="form-group"> <img id="show_image" width="300" class="img img-thumbnail img-circle"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </div> </div> </div> <script> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#show_image').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#image").change(function(){ readURL(this); }); </script> <body> </html> |
If you have still any problem you can mention them in comments.
Leave a Reply