Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

Загрузка файлов

Используйте наши пользовательские формы для загрузки файлов в кросс-браузерном стиле со встроенными настройками и облегченным JavaScript.

Рекомендуемый плагин для анимации пользовательской загрузки файлов - bs-custom-file-input, его мы используем в наших документах.

Настройки по умолчанию

Загрузки файлов является довольно сложным процессом и требует дополнительного JavaScript, если вы хотите связать их с функцией Choose file… и выбранным текстом имени файла.

<div class="form-file">
  <input type="file" class="form-file-input" id="customFile">
  <label class="form-file-label" for="customFile">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

Добавьте атрибут disabled в <input> и настраиваемая разметка будет отображаться как отключенная.

<div class="form-file">
  <input type="file" class="form-file-input" id="customFileDisabled" disabled>
  <label class="form-file-label" for="customFileDisabled">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

Более длинный текст-заполнитель обрезается, а если места недостаточно, добавляется многоточие.

<div class="form-file">
  <input type="file" class="form-file-input" id="customFileLong">
  <label class="form-file-label" for="customFileLong">
    <span class="form-file-text">Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a pharetra augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum massa justo sit amet risus cras mattis consectetur purus sit amet fermentum</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

Мы скрываем файл по умолчанию <input> через непрозрачность opacity и вместо этого стилизуем

Определение размера

Вы также можете выбирать из небольших и больших пользовательских выборок для соответствия текстового ввода аналогичного размера.

<div class="form-file form-file-lg mb-3">
  <input type="file" class="form-file-input" id="customFileLg">
  <label class="form-file-label" for="customFileLg">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

<div class="form-file form-file-sm">
  <input type="file" class="form-file-input" id="customFileSm">
  <label class="form-file-label" for="customFileSm">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>