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

嘗試類似的東西

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

如果沒有，請嘗試此答案。

Answer 2

這是一個非常基本的示例，使用右側的 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>

Answer 3

如果您像我一樣用頭撞磚牆，如果您使用Bootstrap 4.x 中的.custom-file-input選項，則清除文件輸入的多種方式都不會工作。 正如文檔所描述的，這個類會導致 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');