"Upload Image w Preview & Filename"
Bootstrap 3.3.0 Snippet by JoeEarly

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="//code.jquery.com/jquery-1.11.1.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label>Upload Image</label> <div class="input-group"> <span class="input-group-btn"> <span class="btn btn-default btn-file-front"> Browse… <input type="file" id="imgInp-front"> </span> </span> <input type="text" class="form-control" readonly> </div> <img id='img-upload-front'/> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>Upload Image</label> <div class="input-group"> <span class="input-group-btn"> <span class="btn btn-default btn-file-back"> Browse… <input type="file" id="imgInp-back"> </span> </span> <input type="text" class="form-control" readonly> </div> <div class="col" id="imgpre"> <img id='img-upload-back'/> </div> </div> </div> </div> </div>
.btn-file-front { position: relative; overflow: hidden; } .btn-file-front input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } #img-upload-front{ width: 100%; } .btn-file-back { position: relative; overflow: hidden; } .btn-file-back input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } #img-upload-back{ width: 100%; } #imgpre{ }
$(document).ready( function() { $(document).on('change', '.btn-file-front :file', function() { var input = $(this), label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); input.trigger('fileselect', [label]); }); $('.btn-file-front :file').on('fileselect', function(event, label) { var input = $(this).parents('.input-group').find(':text'), log = label; if( input.length ) { input.val(log); } else { if( log ) alert(log); } }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img-upload-front').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp-front").change(function(){ readURL(this); }); }); $(document).ready( function() { $(document).on('change', '.btn-file-back :file', function() { var input = $(this), label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); input.trigger('fileselect', [label]); }); $('.btn-file-back :file').on('fileselect', function(event, label) { var input = $(this).parents('.input-group').find(':text'), log = label; if( input.length ) { input.val(log); } else { if( log ) alert(log); } }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img-upload-back').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp-back").change(function(){ readURL(this); }); });

Related: See More


Questions / Comments: