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

Question

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

          <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()。 没有效果。 我真的很困惑。 我认为永远不会触发更改事件，因为输入 typ="file" 永远不会被清除/重新发送？ 任何的想法？

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

Answer 1

此代码片段将帮助您

 $("#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>

Answer 2

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

和

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

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

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

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

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

---

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