A demo of image previewing by using jQuery

Bootstrap Code		Output
<!doctype html> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="css/bootstrap-imageupload/bootstrap-imageupload.css" rel="stylesheet"> <style> body { padding-top: 70px; } .imageupload { margin: 20px 0; } </style> </head> <body> <div class="container"> <p>A demo of image preview by using jQuery/Bootstrap</p> <!-- bootstrap-imageupload. --> <div class="imageupload panel panel-default"> <div class="panel-heading clearfix"> <h3 class="panel-title pull-left">Select Image file</h3> <div class="btn-group pull-right"> <button type="button" class="btn btn-default active">File</button> <button type="button" class="btn btn-default">URL</button> </div> </div> <div class="file-tab panel-body"> <label class="btn btn-primary btn-file"> <span>Browse</span> <!-- The file is stored here. --> <input type="file" name="image-file"> </label> <button type="button" class="btn btn-danger">Delete image</button> </div> <div class="url-tab panel-body"> <div class="input-group"> <input type="text" class="form-control hasclear" placeholder="Image URL"> <div class="input-group-btn"> <button type="button" class="btn btn-default">Submit</button> </div> </div> <button type="button" class="btn btn-default">Remove</button> <!-- The URL is stored here. --> <input type="hidden" name="image-url"> </div> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="js/bootstrap-imageupload/bootstrap-imageupload.js"></script> <script> var $imageupload = $('.imageupload'); $imageupload.imageupload(); </script> </body> </html>		A demo of image preview by using jQuery/Bootstrap Select Image file Browse

Select Image file