Bootstrap Twitter 输入类型文件如何清除文件？

Question

I'm implementing option for the user in the form where they can select one of allowed files and upload. This feature interface is build in Bootstrap 3 and I found one of the blogs that helped me style the interface. However, I'm wondering if there is a good option to clear/remove selected file? In case if user decided not to upload the file how they can remove it? I would need like X delete button on the very right side. Also file has to be remove with JavaScript I guess. If anyone knows the way to achieve this please let me know. Here is my code example:

 $("#frm_file").on("change", uploadFile); function uploadFile() { var ftype = $(this).get(0).files[0].type, fname = $(this).get(0).files[0].name, fextension = fname.split('.').pop(), // Another way to get file extension: fname.substring(fname.lastIndexOf('.')+1); validExtensions = ["jpg","jpeg","png","gif","doc","docx","xls","xlsx","txt","pdf"]; console.log(fname); $("#frm_filename").val(fname); }

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="form-group"> <label class="control-label" for="file"><span class="label label-default">File:</span></label> <div class="input-group"> <label class="input-group-btn"> <span class="btn btn-primary"> Browse&hellip; <input type="file" name="frm_file" id="frm_file" style="display: none;"> </span> </label> <input type="text" class="form-control" name="frm_filename" id="frm_filename" readonly> </div> </div>

Answer 1

Try something like

document.getElementById('frm_file').value = "";

If not, try this answer.

Answer 2

Here is a very basic example using the bootstrap button on the right hand side. This is practically taken from the bootstrap 3.7 website. https://getbootstrap.com/docs/3.3/css/#forms

    <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
  </div>
  <span id="clear" class="input-group-addon">X</span>
</div>

<script>
    Document.getElementById("clear").addEventListener("click", clearInput);

    Function clearInput(){
        Document.getElementById("clear").Value = "";
    }
</script>

Answer 3

In case you're banging your head against a brick wall like I've been, if you're using the .custom-file-input option from Bootstrap 4.x , none of the many and varied ways of clearing your file input will work. As the docs describe, this class causes Bootstrap to "hide the default file <input> via opacity and instead style the <label> ". So to clear it, this is what I did:

Given (from the Bootstrap docs):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Use:

var $input = $('#customFile')
$input.val(null);
$input.next('label').text('Choose file');