删除图像预览和上传的图像

时间:2016-12-17 12:30:23

标签: javascript jquery

当我上传图片时,我预览了我正在上传的图片。

我现在需要的是一个功能,当我上传时可能我选择了一个错误的图片,而不是我想选择特定的图像..或者更多..并删除所选图像和输入的来源..

<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>

JS功能:

<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>

0 个答案:

没有答案