Input file (Field & button)

Input[type="file"] field and button.

by Ankit Patidar

HTML

<link rel="stylesheet" href="//getbootstrap.com/dist/css/bootstrap.css">
<div class="form-group">
  <label>Image1</label>
  <input type='file' class="form-control">
  <div class="imgQuad"><img src="//www.gravatar.com/avatar/b99874d8fb1b62812b12e722637efc6f/?default=&s=64" alt="your image1"></div>
</div>

<div class="form-group fileQuad">
  <label>Image2</label>
  <div class="input-group">
    <input type="text" class="form-control" readonly>
    <span class="input-group-btn">
      <span class="btn btn-primary btn-file">Browse <input type="file"></span>
    </span>
  </div>
  <div class="imgQuad">
    <img class="defaultImg" src="//www.gravatar.com/avatar/b99874d8fb1b62812b12e722637efc6f/?default=&s=64" alt="your image2">
    <img class="uploadedImg hide" src="#">
  </div>
  <button class="btn btn-default resetImgBtn">Reset</button>
</div>

<div class="form-group fileQuad">
  <label>Image3</label>
  <div class="imgQuad"><img src="//www.gravatar.com/avatar/b99874d8fb1b62812b12e722637efc6f/?default=&s=64" alt="your image3"></div>
  <span class="btn btn-primary btn-xs">Select File <input type="file" class=""></span>
</div>

CSS

.fileQuad .btn{overflow:hidden;position:relative}
.fileQuad input[type=file]{opacity:0;position:absolute;top:0px;left:0;cursor:pointer;padding:30px}
.imgQuad{margin:10px 0}
.imgQuad img{height:100px}

JavaScript

$('.fileQuad div input').click(function(){
	console.log($(this).siblings('span').find('input[type="file"]'));
  $(this).siblings('span').find('input[type="file"]').click();
});
$("input[type='file']").change(function(){
  readURL(this);
});
function readURL(input){
  console.log(input);
  console.log($(input).val());
  if(input.files && input.files[0]){
    var reader = new FileReader();
    reader.onload = function(e){
      console.log(e.target.result);
      $(input).parents('.form-group').find('.imgQuad img.uploadedImg').attr('src', e.target.result);
			$(input).parents('.form-group').find('input[type="text"].form-control').val($(input).val());
      $(input).parents('.fileQuad').find('.imgQuad .uploadedImg').removeClass('hide');
      $(input).parents('.fileQuad').find('.imgQuad .defaultImg').addClass('hide');
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$('.resetImgBtn').click(function(){
  $(this).parents('.fileQuad').find('.imgQuad .defaultImg').removeClass('hide');
  $(this).parents('.fileQuad').find('.imgQuad .uploadedImg').addClass('hide');
  $(this).siblings('span').children('input[type="file"]').val('');
});