Bootstrap Twitter тип файла ввода, как очистить файл? - PullRequest
Новая
       9

Bootstrap Twitter тип файла ввода, как очистить файл?

0 голосов
/ 15 ноября 2018

Я реализую опцию для пользователей в форме, где они могут выбрать один из разрешенных файлов и загрузить.Этот функциональный интерфейс встроен в 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>

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Вот очень простой пример использования кнопки начальной загрузки справа. Это практически взято с сайта начальной загрузки 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>
0 голосов
/ 15 ноября 2018

Попробуйте что-то вроде 

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

Если нет, попробуйте этот ответ.

...