CODEWITHSUNDEEP
javascriptjqueryimage
renat natanael
renat natanael

Reputation: 137

create button reset on image preview

hello i have an image upload with image preview, when user upload image, a button remove show up for cancel that image(the image user upload) and switch to back to image default(for this case placeholder image), and the button remove got hidden because input file didnt have any value. for now i success to show up the button when user upload. but when user click the remove. only the button remove got hidden, but the image still there. how to make the image back to placeholder when user click remove?

this is my code

$(document).ready(function() {
        $(".input-file").on("change", function(){
            if($(this).val() == "") {
                $(this).parent().find(".image-upload-footer").css({"display": "none"});
            } else {
            $(this).parent().find(".image-upload-footer").css({"display": "block"});
            }
        });
        $(".reset").click(function(){
            $(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change');
        }); 
    });

this is the jsfiddle https://jsfiddle.net/uxsxuwzd/1/

thankyou

Upvotes: 2

Views: 1966

Answers (1)

Divyesh Patoriya
Divyesh Patoriya

Reputation: 518

Please replace this code in your functions. You should have to reset the selected src of input file.

This is for multiple type of images in dimension.

$(document).ready(function() { 
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#image_upload_preview1').attr('src', e.target.result);
      }

      reader.readAsDataURL(input.files[0]);
    }
  }
  $("#inputFile1").change(function () {
    readURL(this);
  });
});
$(document).ready(function() { 
  function readURLs(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#image_upload_preview2').attr('src', e.target.result);
      }

      reader.readAsDataURL(input.files[0]);
    }
  }
  $("#inputFile2").change(function () {
    readURLs(this);
  });
});
$(document).ready(function() {
        $(".input-file").on("change", function(){
            if($(this).val() == "") {
                $(this).parent().find(".image-upload-footer").css({"display": "none"});
            } else {
            $(this).parent().find(".image-upload-footer").css({"display": "block"});
            }
        });
        $(".reset").click(function(){
            $(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change');
            
            var newImg=$(this).attr('custattr');
             
           $("#"+$(this).closest(".image-upload").parent().find(".img-responsive").attr('id')).attr("src",newImg);
        }); 
    });   
.image-upload-footer p{
	display: inline
}
.image-upload  input[type=file]{
    display: none;
}
.image-upload label{
	margin-bottom: 0;
}
.image-upload img{
	cursor: pointer;
}
.profileback .deleteThis{
	position: absolute;
    top: 6px;
    right: 21px;
    padding: 0;
}
.deleteThis span{
	color: #fff
}
.image-upload-footer{
	background-color: rgba(34, 34, 34, 0.87);
 	margin-top: -6px;
 	padding: 4px 10px;
}
.image-upload-footer button{
    padding: 0px 5px;
    border-radius: 100%;
    margin-left: 15px;
}
.image-upload-footer button span,.image-upload-footer p{
	color: #fff ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<div class="col-xs-6">
  <div class="image-upload">
    <label for="inputFile1">
      <img id="image_upload_preview1"  class="img-responsive mainPic" src="http://placehold.it/350x150"/>
    </label>
    <input id="inputFile1" class="input-file" type="file"/>
    <div class="image-upload-footer" style="display:none">
      <button type="reset" custattr="http://placehold.it/350x150" class="btn btn-red reset">
        <span class="fa fa-times"aria-hidden="true">X</span>
      </button>
      <p>remove</p>
    </div>
  </div>
</div>
<div class="col-xs-6">
  <div class="image-upload">
  <label for="inputFile2">
    <img id="image_upload_preview2"  class="img-responsive" src="http://placehold.it/746x728" alt=""/>
  </label>
  <input id="inputFile2" class="input-file" type="file"/>
  <div class="image-upload-footer" style="display:none">
    <button type="button" custattr="http://placehold.it/746x728" class="btn btn-red reset">
      <span class="fa fa-times"aria-hidden="true">X</span>
    </button>
    <p>remove</p>
  </div>
</div>
</div>

This is for one type of images dimension

 $(".reset").click(function(){
    $(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change');
   $("#"+$(this).closest(".image-upload").parent().find(".img-responsive").attr('id')).attr("src","http://placehold.it/350x150");
});

Upvotes: 1

Related Questions