it-swarm.com.ru

Bootstrap 4 Ввод файлов

Я борюсь с загрузчиком файлового браузера. Если я использую custom-file-control, я все время буду видеть Выбор значения файла. https://v4-alpha.getbootstrap.com/components/forms/#file-browser

Я хотел бы изменить значение файла выбора после того, как файл был выбран. Это значение фактически скрыто в css .custom-file-control:lang(en)::after, и я не знаю, как получить к нему доступ и изменить его в javascript. Я могу получить значение выбранного файла следующим образом:

document.getElementById("exampleInputFile").value.split("\\").pop();

не нужно менять 

.custom-file-control:lang(en)::after {
    content: "Choose file...";
}

как-то

ссылка: http://codepen.io/Matoo125/pen/LWobNp

32
Matej Vrzala M4

Обновлено 2018

Bootstrap 4.1

Теперь текст местозаполнителя «Выбрать файл ...» установлен в custom-file-label:

<div class="custom-file" id="customFile" lang="es">
        <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
        <label class="custom-file-label" for="exampleInputFile">
           Select file...
        </label>
</div>

Изменение текста кнопки «Обзор» требует немного дополнительных CSS или SASS.

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

https://www.codeply.com/go/gnVCj66Efp (CSS)
https://www.codeply.com/go/2Mo9OrokBQ (SASS)

Также обратите внимание на то, как работает языковой перевод с помощью атрибута lang="".


Bootstrap 4 Alpha 6

Я думаю, что здесь есть 2 отдельных вопроса ..

<label class="custom-file" id="customFile">
        <input type="file" class="custom-file-input">
        <span class="custom-file-control form-control-file"></span>
</label>

1 - Как изменить начальный заполнитель и текст кнопки

В Bootstrap 4 значение заполнителя initial задается в custom-file-control с помощью псевдо-элемента ::after CSS на основе языка HTML. Кнопка начального файла (которая на самом деле не кнопка, а выглядит как кнопка) устанавливается с помощью псевдо-элемента CSS ::before. Эти значения могут быть переопределены с помощью CSS.

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

2 - Как получить выбранное значение имени файла и обновить ввод для отображения значения.

После выбора файла это значение можно получить с помощью JavaScript/jQuery.

$('.custom-file-input').on('change',function(){
    var fileName = $(this).val();
})

Однако, поскольку заполнитель текста для ввода является псевдоэлементом, нет простого способа манипулировать этим с помощью Js/jQuery . Однако у вас может быть другой класс CSS, который скрывает псевдоконтент после выбора файла ... 

.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

Используйте jQuery для переключения класса .selected на .custom-file-control после выбора файла. Это скроет начальное значение заполнителя. Затем поместите значение имени файла в диапазон .form-control-file ...

$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
})

Затем вы можете обрабатывать загрузку или повторный выбор файла по мере необходимости.

Демонстрация на Codeply (альфа 6)

37
Zim

Я просто решил это так

Html:

<div class="custom-file">
   <input id="logo" type="file" class="custom-file-input">
   <label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>

JS:

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

Примечание: Спасибо ajax333221 за упоминание класса .text-truncate, который будет скрывать переполнение внутри метки, если выбранное имя файла слишком длинное.

43
Elnoor

Для изменения языка файлового браузера:
В качестве альтернативы тому, что ZimSystem упомянул (переопределить CSS), документация по начальной загрузке предлагает более элегантное решение: создайте свои собственные стили начальной загрузки, добавив языки в SCSS
Читайте об этом здесь: https://getbootstrap.com/docs/4.0/components/forms/#file-browser

Примечание: вам нужно правильно установить атрибут lang в вашем документе, чтобы это работало

Для обновления значения при выборе файла:
Вы можете сделать это с помощью встроенных js, например:

   <label class="custom-file">
      <input type="file" id="myfile" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])">
      <span class="custom-file-control"></span>
   </label>

Примечание: часть .split('\\').slice(-1)[0] удаляет префикс C:\fakepath \

5
Razvan Pocaznoi

Начиная с Bootstrap 4.3 вы можете изменить местозаполнитель и текст кнопки внутри тега label:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="custom-file">
  <input type="file" class="custom-file-input" id="exampleInputFile">
  <label class="custom-file-label" for="exampleInputFile" data-browse="{Your button text}">{Your placeholder text}</label>
</div>

0
Andrei Veshtard

Решение основано на ответе @Elnoor, но работает с многократным вводом формы загрузки файла и без "хакерской атаки":

HTML:

<div class="custom-file">
    <input id="logo" type="file" class="custom-file-input" multiple>
    <label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>

JS:

$('input[type="file"]').on('change', function () {
    let filenames = [];
    let files = document.getElementById('health_claim_file_form_files').files;

    for (let i in files) {
        if (files.hasOwnProperty(i)) {
            filenames.Push(files[i].name);
        }
    }

    $(this).next('.custom-file-label').addClass("selected").html(filenames.join(',    '));
});
0
Sicaa