Remove image source preview and uploaded image

Question

<div class="row">
 <div class="decoration decoration-margins-photos"></div>

 <div class="col-xs-4 fileContainer padding-box">
  <div class="pic-box">
   <img class="img-upload img-responsive" src="http://icons.iconarchive.com/icons/graphicloads/colorful-long-shadow/256/Home-icon.png">
   <div class="plus-box">+</div>
   <input id="input-3" class="input-upload" accept="image/*" type="file">
 </div>
</div>
<div class="col-xs-4 fileContainer padding-box">
  <div class="pic-box">
   <img class="img-upload img-responsive" src="http://icons.iconarchive.com/icons/graphicloads/colorful-long-shadow/256/Home-icon.png">
   <div class="plus-box">+</div>
   <input id="input-4" class="input-upload" accept="image/*" type="file">
 </div>
</div>

<div class="col-xs-4 padding-box">
 <div class="default-remove">
   <div class="text-center" style="padding-top:10px;">Default</div>
   <div style="padding:0px 5px 0px 5px;">
    <div class="decoration decoration-margins-default"></div></div>
    <div class="text-center" style="padding-bottom:5px;">Remove</div>
  </div>
</div>

I have the next HTML code and I have a JS function when I upload an image I have a preview for the image i'm uploading. What I need now is a function when I'm uploading maybe I select a wrong pic and than I want to select the specific image..or more..and to remove the source of selected image and of the input..

JS function:

<script type="text/javascript">
  $(document).ready(function() {
    function readURL(input) {
      if (input.files && input.files.length) {
        console.log(input.files.length);
        var reader = new FileReader();
        reader.onload = function(e) {
          $(input).siblings('img.img-upload').prop('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
      }
    }

    $(".input-upload").change(function() {
      readURL(this);
      console.log(this.id);
    });  
  });
</script>

Answer 1

As i see you can just create an "Is it the wrong picture?" button and connect it to the readURL() function. the readUrl function will reset the input at the beginning using :

document.getElementById("input-4").value = "";

(** Only after saving the value in a local variable in order to be able to use it later on in the function).

I will also suggest to rename the function to: loadPreviewImage() , since readURL() is not very clear about what the function does.