javascript - Reset or clear a input type file field - Stack Overflow

admin管理员组

文章数量:1399225

I use a upload form / group in my page. This works well. But it is not possible to add a reset/clear function to this. my control is:

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

I have a function to detect on change events

    $('#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);
    });

The file selection and the label are all ok, but it is impossible to reset the input file. The change event is never fired. I moved the reset to the upload button

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

But also no effect. I also tried to use all inside a form tag and to call this.form.reset(). No effect. Iam really confused. I think the change event is never fired because the input typ="file" is never cleared / resented? Any idea?

Additional Info: If I add a file to the control. Change event is fired. In all other cases the change event is not fired. Not with $('#inputGroupFile01').val(''); nor with this.form.reset();

I use a upload form / group in my page. This works well. But it is not possible to add a reset/clear function to this. my control is:

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

I have a function to detect on change events

    $('#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);
    });

The file selection and the label are all ok, but it is impossible to reset the input file. The change event is never fired. I moved the reset to the upload button

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

But also no effect. I also tried to use all inside a form tag and to call this.form.reset(). No effect. Iam really confused. I think the change event is never fired because the input typ="file" is never cleared / resented? Any idea?

Additional Info: If I add a file to the control. Change event is fired. In all other cases the change event is not fired. Not with $('#inputGroupFile01').val(''); nor with this.form.reset();

• javascript
• jquery
• bootstrap-4

Share Improve this question Follow edited Mar 27, 2020 at 8:02 ingo asked Mar 27, 2020 at 7:39 ingoingo 85622 gold badges1111 silver badges2929 bronze badges 13

• 1 if you have a form in your HTML just add reset button, plain simple tag without javascript or jQuery, Reset – ROOT Commented Mar 27, 2020 at 7:50
• 1 @Ma'mounothman Comment from the linked page: You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button). – Anurag Srivastava Commented Mar 27, 2020 at 7:51
• I'm pretty sure you're missing something in the question, the change event does seem to fire – Anurag Srivastava Commented Mar 27, 2020 at 7:54
• @AnuragSrivastava, good note, thank you, on the other hand the functionality is there, so it's our job as developers to use the reset() programmatically then, better that looping/selecting all elements. – ROOT Commented Mar 27, 2020 at 7:58
• 1 @freedomn-m, you made my day. Append the change() will solve my problem – ingo Commented Mar 27, 2020 at 8:24

 |  Show 8 more ments

2 Answers 2

Sorted by: Reset to default 2

This code snippet will help you

$("#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./bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn./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>

If I add a file to the control the Change event is fired. In all other cases the change event is not fired

and

it is impossible to reset the input file. The change event is never fired

The issue here is that UI events (click, change) only fire from UI actions (the user clicking or making a change to the control)

Code actions such as calling .val() is not a UI action so doesn't raise an event.

You can raise/trigger an event via code if/when you need one, eg

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

---

In this specific case, OPs .val('') is working, but they have it hidden behind a UX wrapper so cannot see the input type=file changing instead relying on the change event to update the wrapper. As the change event doesn't fire from .val('') the wrapper is not being updated so it gives the appearance of not updating.

本文标签： javascriptReset or clear a input type file fieldStack Overflow