Javascript JQuery文件上载未重置

我有一个多文件上传解决方案，即单击“重置”按钮后不会清除文件。检查解决方案。 以下是HTML：

<form id="ImageUpload" action="#">
  <div class="field" align="left">
    <h2 class="page-header">Upload your images</h3>
      <div class="form-group">
        <div class="file-loading">
          <input type="file" id="files" name="files[]" multiple />
        </div>
      </div>
  </div>
  <hr />
  <div class="text-center">
    <button type="submit" name="Submit" class="btn btn-success">Submit</button>
    <button type="reset" name="Reset" class="btn btn-danger">Reset</button>
  </div>
</form>

上传你的图片

提交
重置

下面是Javascript：

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\"><i class='fa fa-times'></i></span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function() {
            $(this).parent(".pip").remove();
          });
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});

$（文档）.ready（函数（）{
if（window.File&&window.FileList&&window.FileReader）{
$（“#文件”）。关于（“更改”，函数（e）{
var files=e.target.files，
filesLength=files.length；
对于（var i=0；i”+
）.insertAfter（“#文件”）；
$（“.remove”）。单击（函数（）{
$（this.parent（“.pip”）.remove（）；
});
});
fileReader.readAsDataURL（f）；
}
});
}否则{
警报（“您的浏览器不支持文件API”）
}
});

理想的结果是不仅清除选定文件的数量（“选择文件”按钮），而且清除预览图像

按下“重置”按钮时，下面显示的体验是预期结果

---

我将感谢任何帮助，谢谢

单击“重置”按钮添加功能

$("button[name='Reset']").click(function() {
    var $input = $("#files");
    // Clear your input file value
    $input.replaceWith($input.val('').clone(true));
    // Then clear the preview of the images
    $('.pip').html('');
});

---

单击“重置”按钮可添加功能

$("button[name='Reset']").click(function() {
    var $input = $("#files");
    // Clear your input file value
    $input.replaceWith($input.val('').clone(true));
    // Then clear the preview of the images
    $('.pip').html('');
});

---

您需要为重置按钮单击事件添加功能。以下是您可以做的：

$(document).on('click', '[name=Reset]', function(){
   $('.pip').remove();
})

---

您需要为重置按钮单击事件添加功能。以下是您可以做的：

$(document).on('click', '[name=Reset]', function(){
   $('.pip').remove();
})

---

well reset不知道您对页面做了什么，因此您需要编写一些代码来删除它们。well reset不知道您对页面做了什么，因此您需要编写一些代码来删除它们。