Загрузка файла Bootstrap 4

Ответ 1

Обновлено 2018 год

Бутстрап 4. 1+

Теперь в 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. Также обратите внимание, как работает языковой перевод с помощью атрибута lang="".

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

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

Другой вариант Bootstrap 4.1

В качестве альтернативы вы можете использовать этот пользовательский плагин для ввода файлов

https://www.codeply.com/go/uGJOpHUd8L/file-input

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 начальное значение заполнителя устанавливается в custom-file-control с помощью псевдоэлемента CSS ::after на основе языка 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)

Ответ 2

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

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

Ответ 3

Для изменения языка файлового браузера:
В качестве альтернативы тому, что упоминалось в 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\

Ответ 4

Начиная с 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>

Ответ 5

Я просто добавляю это в мой файл CSS, и это работает:

.custom-file-label::after{content: 'New Text Button' !important;}

Ответ 6

Bootstrap 4

Более подробная информация здесь https://learncodeweb.com/snippets/browse-button-in-bootstrap-4-with-select-image-preview/

Сегодня мне нужно создать кнопку просмотра с возможностью загрузки нескольких файлов, все приведенные выше фрагменты мне не подходят.

Официальный пример Bootstrap также не работает, когда я выбираю несколько файлов.

Я придумаю этот код, может быть, поможет другим в будущем.

<div class="container mt-5">
  <h1 class="text-center">Bootstrap 4 Upload multiple files</h1>
  <div class="col-sm-4 mr-auto ml-auto border p-4">
  <form method="post" enctype="multipart/form-data" action="upload.php">
    <div class="form-group">
      <label><strong>Upload Files</strong></label>
      <div class="custom-file">
        <input type="file" name="files[]" multiple class="custom-file-input" id="customFile">
        <label class="custom-file-label" for="customFile">Choose file</label>
      </div>
    </div>
    <div class="form-group">
      <button type="submit" name="upload" value="upload" id="upload" class="btn btn-block btn-dark"><i class="fa fa-fw fa-upload"></i> Upload</button>
    </div>
  </form>
</div>

Код JS приведен ниже.

$(document).ready(function() {
  $('input[type="file"]').on("change", function() {
    let filenames = [];
    let files = document.getElementById("customFile").files;
    if (files.length > 1) {
      filenames.push("Total Files (" + files.length + ")");
    } else {
      for (let i in files) {
        if (files.hasOwnProperty(i)) {
          filenames.push(files[i].name);
        }
      }
    }
    $(this)
      .next(".custom-file-label")
      .html(filenames.join(","));
  });
});

Пример рабочего кода приведен здесь.

https://codepen.io/mianzaid/pen/GeEbYV

Ответ 7

Решение основано на ответе @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(',    '));
});

Ответ 8

С помощью jquery это можно сделать следующим образом. Код:

$("input.custom-file-input").on("change",function(){if(this.files.length){var filename=this.file[0].name;if(filename.length>23){filename=filename.substr(0,11)+"..."+filename.substr(-10);}$(this).siblings(".custom-file-label").text(filename);}});

Ответ 9

 <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
 <script>
$(function() {
  $(document).on('change', ':file', function() {var input = $(this), numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');input.trigger('fileselect', [numFiles, label]);
  });
  $(document).ready( function() {
      $(':file').on('fileselect', function(event, numFiles, label) {var input = $(this).parents('.custom-file').find('.custom-file-label'),
      log = numFiles > 1 ? numFiles + ' files selected' : label;if( input.length ) {input.text(log);} else {if( log ) alert(log);}});
  });
});
 </script>
  </body>
</html>

Ответ 10

Без JQuery

HTML:

<INPUT type="file" class="custom-file-input"  onchange="return onChangeFileInput(this);">

JS:

function onChangeFileInput(elem){
  var sibling = elem.nextSibling.nextSibling;
  sibling.innerHTML=elem.value;
  return true;
}

KLIG