Bladephp: Now with 7+ codeigniter, php, and laravel project 7+ php project From $18/Year From Rs. 1000/Year

How to Image Preview before upload using Jquery

by
Category:javascript
javascript jquery
How to Image Preview before upload using Jquery

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.

How to Image Preview before upload using Jquery

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);
});

0 Comments


Html code work in comment box


Related Post