Форма начальной загрузки: пользовательская кнопка файла работает, но не показывает имя загруженного файла - PullRequest
Новая
       29

Форма начальной загрузки: пользовательская кнопка файла работает, но не показывает имя загруженного файла

3 голосов
/ 23 сентября 2019

Я создал форму Bootstrap, состоящую из двух столбцов (используя Bootstrap 4.3).Внутри этой формы я использую пользовательскую кнопку загрузки файла.

Кнопка позволяет мне выбирать файлы, а также загружать их по назначению.
Моя единственная проблема заключается в том, что не показывает имя загруженного файла после его загрузки (должнозамените «Файл не выбран», например, вместо «test.xlsx»).

Может кто-нибудь сказать мне, как заставить это работать?Нужно ли мне добавлять jQuery и т. Д. Для этого?

Мой HTML: 

<div class="form-group row">
    <label for="attachment" class="col-md-3 col-lg-2 col-form-label">
        <span id="lblAttachment">Attachment</span>:
    </label>
    <div class="col-md-9 col-lg-10 input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="lblFile">File</span>
        </div>
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="attachment" name="attachment" aria-describedby="lblFile"/>
            <label for="attachment" class="custom-file-label">No file chosen</label>
        </div>
    </div>
</div>

Большое спасибо заранее.

Ответы [ 2 ]

2 голосов
/ 23 сентября 2019

I Проверка вашего кода, его работоспособность 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form action="/action_page.php">
    <div class="form-group row">
    <label for="attachment" class="col-md-3 col-lg-2 col-form-label">
        <span id="lblAttachment">Attachment</span>:
    </label>
    <div class="col-md-9 col-lg-10 input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="lblFile">File</span>
        </div>
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="attachment" name="attachment" aria-describedby="lblFile"/>
            <label for="attachment" class="custom-file-label">No file chosen</label>
        </div>
    </div>
</div>  
  </form>
</div>

</body>
</html>

Для получения дополнительной информации проверьте эту ссылку: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_form_custom_file&stacked=h

1 голос
/ 23 сентября 2019

Если я не ошибаюсь, если вы хотите настроить это сообщение «Нет файла», вам нужно изменить его после загрузки файла, используя JS, Angular и т. Д., Поскольку этот текст не знает, когда изменить.

что-то вроде этого поможет: 

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

Вот несколько ссылок, которые помогут вам:

https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_form_custom_file&stacked=h

...