Hey friends, how are you? i hope that you all doing well. Keep it up what you love. Let’s learn something more in the jQuery. In this tutorial we will learn how to get preview image before upload using jQuery. You have seen many application which provide this functionality. If you choose image it will show you on the box. So let’s see step by step. Here i am using HTML5 FileReader functionality for displaying a preview of image. You will learn more about FileReader here. Code is very simple and short. I hope that you will get it in your mind by today.
See this is my “index.php” file which contain file choosing html code and simple block on which we will display preview of image. See the below code,
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Add textfield using jquery</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Script for Bootstrap JS -->
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<center><h2>Preview image before upload</h2></center>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<!-- Form data start -->
<form action="/abc.php" method="POST" role="form" enctype="multipart/form-data">
<div id="preview">
<img src="" id="previewImage" width="200" height="200">
</div>
<div class="form-group">
<label for="">Choose file </label>
<input type="file" class="form-control" id="new_file" name="new_file" placeholder="Input field">
</div>
</form>
<!-- Form data end -->
</div>
</div>
</div>
</body>
<!-- Jquery Script For Preview File -->
<script type="text/javascript">
$('#new_file').change(function(){
var file = this.files[0];
if(file.type != "image/png" && file.type != "image/jpeg" && file.type != "image/gif")
{
alert("Please choose png, jpeg or gif files");
return false;
}
var reader = new FileReader();
reader.onload = function(e) {
$('#previewImage').attr('src', e.target.result);
}
reader.readAsDataURL(file);
});
</script>
</html>
In the above code, When someone choose a file jQuery change event take place and contain the information about selected file. Then i am validate a file that file contain .png, .jpeg or .gif extension or not. Then create a new object from FileReader class. After doing all this process finally we get preview of selected image. Cheers 🙂
I hope that you may like this tutorial. Please share it with your friends. If you have any kind problem regarding this tutorial. Feel free to ask me question. Thank you very much. 🙂
