How to Image Preview before upload using Jquery

0

In popular networking sites such as Facebook and Linkedin, you might have observed the feature called Image Preview. Preview image before upload is a most required feature for file upload functionality. It helps the user to view chosen file and change the image before upload.

HTML Code

<div class="form-group">
	<label class="col-md-2 control-label">Product Image<span class="text-danger">*</span></label>
	<div class="col-md-7">
		<img id="previewimage" onclick="$('#uploadFile').click();" src="<?php echo base_url(); ?>images/product_image.gif" style="cursor: pointer;height: 210px;width: 210px;position: relative;z-index: 10;"/>
		<input type="file" id="uploadFile" name="product_image" style="position: absolute; margin: 0px auto; visibility: hidden;" accept="image/*" />
		<div style="margin-top: 0px; color: red;"><?= form_error('product_image'); ?></div>
	</div>
</div>

Jquery / JavaScript Code

function previewImage(input) {
	if (input.files && input.files[0]) {
				var reader = new FileReader();

				reader.onload = function (e) {
						$('#previewimage').attr('src', e.target.result);
				}
				reader.readAsDataURL(input.files[0]);
	}
}
$("#uploadFile").change(function(){
	previewImage(this);
});