<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="image-upload"> <div class="col-md-4"> <div class="upload_box"> <label for="choosefile"> Click & Upload file <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTjeLLLePdlGJhp9y8sBsg2z2JEjjnsBpmkEwhNcoUBDapZopVT" class="iconimg" /> </label> <input type="file" name="file" id="choosefile"> <div class="dimg"> <img src="" id="choosefileimg" /> </div> </div> </div> <div class="col-md-4"> <div class="upload_box"> <label for="iguruupload"> Click & Upload file <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTjeLLLePdlGJhp9y8sBsg2z2JEjjnsBpmkEwhNcoUBDapZopVT" class="iconimg" /> </label> <input type="file" name="file" id="iguruupload"> <div class="dimg"> <img src="" id="iguruuploadimg" /> </div> </div> </div> <div class="col-md-4"> <div class="upload_box"> <label for="portalfile"> Click & Upload file <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTjeLLLePdlGJhp9y8sBsg2z2JEjjnsBpmkEwhNcoUBDapZopVT" class="iconimg" /> </label> <input type="file" name="file" id="portalfile"> <div class="dimg"> <img src="" id="portalimg" /> </div> </div> </div> </div> </div> </div>

img{max-width: 100%;} .image-upload input { display: none; } .image-upload .iconimg { width: 80px; cursor: pointer; text-align: center; margin: 0 auto; display: block } .image-upload label{display: block;text-align: center;} .upload_box { border: 1px solid #f9f9f9; margin-top: 10px; padding: 10px; background: #ffffff; box-shadow: 2px 2px 10px rgba(221, 221, 221, 0.56); border-radius: 3px; } .dimg img { max-width: 100%; height: 100%; } .dimg { width: auto; height: 150px; overflow: hidden; text-align: center; margin: 0 auto; }

function iguruURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#choosefileimg').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#choosefile").change(function(){ iguruURL(this); }); function portalURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#iguruuploadimg').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#iguruupload").change(function(){ portalURL(this); }); function panURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#portalimg').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#portalfile").change(function(){ panURL(this); });