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

尝试类似

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

如果没有，请尝试this答案。

Answer 2

这是一个使用右侧引导按钮的非常基本的示例。这实际上是从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>

Answer 3

如果像我以前那样将头撞在砖墙上，那么如果您使用的是.custom-file-input option from Bootstrap 4.x，那么清除文件输入的多种方法都不可行。如文档所述，此类导致Bootstrap“通过不透明度隐藏默认文件<input>并设置<label>的样式”。因此，要清除它，这就是我所做的：

给出（来自Bootstrap文档）：

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

使用：

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

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

3 个答案: