
In this small tutorial, I will teach you how to get the preview of the image after uploading.
In this step, we have to create an HTML file name is image.html and put the below code.
Image:<br>
<input name="files" type="file" id="post_image">
<img src="" id="post_img_show" width="200px" />
<br><br>
After creating an HTML file you have put the below jQuery code in your file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#post_img_show').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#post_image").change(function(){
readURL(this);
});
</script>
Here’s the final code:
Image:<br>
<input name="files" type="file" id="post_image">
<br>
<br>
<img src="" id="post_img_show" width="700px" height="500px" />
<br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#post_img_show').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#post_image").change(function(){
readURL(this);
});
</script>
Output:

Now Open your browser an run this URL:
http://localhost/image.html
Hello
Hi Sayed, How can I help?
I’m not really sure why you’re using JQuery as you’re using very little of it and could easly be done with a standard event listener. Just adding bloat to the code.
I know there are many method use this tutorial, we will upload the next blog on with another standard event listener.