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>

我有下一个HTML代码，当我上传图片时我有一个JS功能我有一个预览我正在上传的图像。我现在需要的是一个功能，当我上传时可能我选择了一个错误的图片，而不是我想选择特定的图像......或者更多..并删除所选图像的来源和输入..

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>

Answer 1

正如我所见，你可以创造一个“这是错误的画面吗？”按钮并将其连接到readURL()功能。 readUrl函数将使用以下命令重置开头的输入：

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

（**仅在将值保存在局部变量中后才能在函数中使用它。）

我还建议将该函数重命名为： loadPreviewImage()，因为readURL()对函数的作用不是很清楚。

删除图片来源预览并上传图片

1 个答案: