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

Question

我正在表单中为用户实现选项，他们可以选择允许的文件之一并上传。这个功能界面是在 Bootstrap 3 中构建的，我找到了帮助我设计界面风格的博客之一。但是，我想知道是否有一个好的选项来清除/删除选定的文件？如果用户决定不上传文件，如何删除它？我需要在最右侧添加 X 删除按钮。我猜想还必须使用 JavaScript 删除文件。如果有人知道实现此目标的方法，请告诉我。这是我的代码示例:

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

这是一个使用右侧 Bootstrap 按钮的非常基本的示例。这实际上取自 bootstrap 3.7 网站。 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>