Preview uploaded image through Jquery | Techbirds

This might be a old topic. But still, it will be useful for the beginners.

Using jQuery we can achieve this, The preview action will be executed all in the browser without using Ajax to upload the image. Here is the example. The benefit of this is that we can display an uploaded image to the user without Uploading it directly to server.

Here is a WORKING DEMO

HTML: 

Add Photo

 CSS : 

.input-file-row-1:after { content: “.”; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .input-file-row-1{ display: inline-block; margin-top: 25px; position: relative; } #preview_image { display: none; width: 90px; height: 90px; margin: 2px 0px 0px 5px; border-radius: 10px; } .upload-file-container { position: relative; width: 100px; height: 137px; overflow: hidden; background: url(https://i.imgur.com/AeUEdJb.png) top center no-repeat; float: left; margin-left: 23px; } .upload-file-container-text{ font-family: Arial, sans-serif; font-size: 12px; color: #719d2b; line-height: 17px; text-align: center; display: block; position: absolute; left: 0; bottom: 0; width: 100px; height: 35px; } .upload-file-container-text > span{ border-bottom: 1px solid #719d2b; cursor: pointer; } .one_opacity_0 { opacity: 0; height: 0; width: 1px; float: left; }

 Jquery : 

function readURL(input, target) { if (input.files && input.files[0]) { var reader = new FileReader(); var image_target = $(target); reader.onload = function (e) { image_target.attr(‘src’, e.target.result).show(); }; reader.readAsDataURL(input.files[0]); } } $(“#patient_pic”).live(“change”,function(){ readURL(this, “#preview_image”) });

1,107 total views, 1 views today

Share this On