重置或清除输入类型文件字段答案

【问题标题】：Reset or clear a input type file field重置或清除输入类型文件字段
【发布时间】：2020-03-27 16:43:40
【问题描述】：

我在我的页面中使用上传表单/组。这很好用。但不可能为此添加重置/清除功能。我的控制是：

          <div id="uploadform" style="width:100%;" data-provides="fileupload">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                  <label class="input-group-text"><i class="fas fa-folder-plus"></i></label>
                  </div>
                  <div class="custom-file" >
                    <input type="file" name="sampleFile" class="custom-file-input" id="inputGroupFile01">
                    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                  </div>
                    <div class="input-group-append">
                     <button type="button" id="fileupload" class="btn btn-primary">Upload!</button>
                    </div>
                </div>

          </div>

我有一个检测变化事件的功能

    $('#inputGroupFile01').on('change',function(e){
        console.log("onchange");
        //get the file name
        var fileName = e.target.files[0].name;
        //replace the "Choose a file" label
        $(this).next('.custom-file-label').html(fileName);
    });

文件选择和标签都可以，但是无法重置输入文件。永远不会触发更改事件。我将重置移动到上传按钮

    $( '#fileupload' ).click(function() {
        console.log("Upload");
        $('#inputGroupFile01').val('');
        return;

但也没有效果。我还尝试在表单标签内使用 all 并调用 this.form.reset()。没有效果。我真的很困惑。我认为 change 事件永远不会被触发，因为输入 typ="file" 永远不会被清除/重新发送？有什么想法吗？

附加信息：如果我将文件添加到控件。更改事件被触发。在所有其他情况下，不会触发更改事件。不是$('#inputGroupFile01').val(''); 也不是this.form.reset();

【问题讨论】：

如果您的 HTML 中有一个表单，只需添加重置按钮，没有 javascript 或 jQuery 的简单标签，Reset
@Ma'mounothman 来自链接页面的评论：您通常应该避免在表单中包含重置按钮。它们很少有用，反而更有可能让误点击它们的用户感到沮丧（通常是在尝试点击提交按钮时）。
我很确定您在问题中遗漏了一些东西，更改事件似乎确实触发了
@AnuragSrivastava，请注意，谢谢，另一方面，功能在那里，所以我们作为开发人员的工作就是以编程方式使用 reset()，比循环/选择所有元素更好。
@freedomn-m，你成就了我的一天。追加 change() 将解决我的问题

标签： javascript jquery bootstrap-4

【解决方案1】：

这段代码sn-p会帮助你

$("#clear").click(function() {  
  $("#inputGroupFile01").val('');
  console.log("clear field", $("#inputGroupFile01").val())
})
$("#fileupload").click(function() {
  console.log("current url is", $("#inputGroupFile01").val())
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <div id="uploadform" style="width:100%;" data-provides="fileupload">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                  <label class="input-group-text"><i class="fas fa-folder-plus"></i></label>
                </div>
                <div class="custom-file" >
                    <input type="file" name="sampleFile"  class="custom-file-input" id="inputGroupFile01">
                    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                </div>
                <div class="input-group-append">
                     <button type="button" id="fileupload" class="btn btn-primary">Upload!</button>
                      <button type="button" id="clear" class="btn btn-primary">Clear!</button>
             </div>
         </div>
    </div>

【讨论】：

你的意思是我的jsfiddle中的代码sn-p？？？哇。复制别人的代码/示例而不给他们信用有点粗鲁！这根本没有帮助，因为这不是 OP 的问题！
有点不同，亲爱的

【解决方案2】：

如果我将文件添加到控件，则会触发 Change 事件。在所有其他情况下，不会触发更改事件

和

无法重置输入文件。永远不会触发更改事件

这里的问题是 UI 事件（单击、更改）仅由 UI 操作（用户单击或更改控件）触发

调用.val() 等代码操作不是 UI 操作，因此不会引发事件。

如果/当您需要事件时，您可以通过代码引发/触发事件，例如

$("#id").val('').change()

在这种特定情况下，OP .val('') 正在工作，但他们将其隐藏在 UX 包装器后面，因此无法看到 input type=file 更改，而是依靠更改事件来更新包装器。由于.val('') 没有触发更改事件，因此包装器没有被更新，因此它看起来没有更新。

【讨论】：