Bootstrap 4-Dateieingabe

Ich habe Probleme mit dem Bootstrap 4-Dateibrowser. Wenn ich die benutzerdefinierte Dateikontrolle verwende, wird ständig der Wert "Datei auswählen" angezeigt. https://v4-alpha.getbootstrap.com/components/forms/#file-browser

Ich möchte den Wert von select file ändern, nachdem die Datei ausgewählt wurde. Dieser Wert ist tatsächlich in CSS versteckt .custom-file-control:lang(en)::afterund ich weiß nicht, wie ich in Javascript darauf zugreifen und ihn ändern soll. Ich kann den Wert der ausgewählten Datei folgendermaßen ermitteln:

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

Ich muss mich nicht ändern

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

irgendwie

Link: http://codepen.io/Matoo125/pen/LWobNp

Aktualisiert 2016

Bootstrap 4.4

Das Anzeigen des ausgewählten Dateinamens kann auch mit einfachem JavaScript erfolgen. Hier ist ein Beispiel, das die standardmäßige Eingabe einer benutzerdefinierten Datei mit Beschriftung voraussetzt, die das nächste Geschwisterelement zur Eingabe ist ...

document.querySelector('.custom-file-input').addEventListener('change',function(e){
  var fileName = document.getElementById("myInput").files[0].name;
  var nextSibling = e.target.nextElementSibling
  nextSibling.innerText = fileName
})

https://codeply.com/p/LtpNZllird

Bootstrap 4.1+

Jetzt wird in Bootstrap 4.1 der Platzhaltertext "Datei auswählen ..." gesetzt in 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>

Das Ändern des Textes der Schaltfläche "Durchsuchen" erfordert etwas zusätzliches CSS oder SASS. Beachten Sie auch, wie die Sprachübersetzung mithilfe des lang=""Attributs funktioniert .

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

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

Eine weitere Bootstrap 4.1-Option

Alternativ können Sie dieses benutzerdefinierte Dateieingabe-Plugin verwenden

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

Bootstrap 4 Alpha 6 (Originalantwort)

Ich denke, hier gibt es zwei verschiedene Probleme.

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

1 - Wie ändern Sie den anfänglichen Platzhalter und den Schaltflächentext

In Bootstrap 4 wird der anfängliche Platzhalterwert custom-file-controlmit einem CSS-Pseudoelement festgelegt ::after, das auf der HTML-Sprache basiert. Die anfängliche Dateischaltfläche (die eigentlich keine Schaltfläche ist, aber wie eine aussieht) wird mit einem CSS-Pseudoelement festgelegt ::before. Diese Werte können mit CSS überschrieben werden.

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

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

2 - So erhalten Sie den ausgewählten Dateinamenwert und aktualisieren die Eingabe, um den Wert anzuzeigen.

Sobald eine Datei ausgewählt ist, kann der Wert mit JavaScript / jQuery abgerufen werden.

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

Da der Platzhaltertext für die Eingabe jedoch ein Pseudoelement ist, gibt es keine einfache Möglichkeit, dies mit Js / jQuery zu ändern . Sie können jedoch eine andere CSS-Klasse haben, die den Pseudoinhalt verbirgt, sobald die Datei ausgewählt ist ...

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

Verwenden Sie jQuery, um die .selectedKlasse nach .custom-file-controlAuswahl der Datei umzuschalten. Dadurch wird der anfängliche Platzhalterwert ausgeblendet. Geben Sie dann den Dateinamen in den Bereich ein .form-control-file...

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

Sie können dann den Datei-Upload oder die erneute Auswahl nach Bedarf durchführen.

Demo auf Codeply (Alpha 6)

Ich habe es einfach so gelöst

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); 
});

Hinweis : Vielen Dank an ajax333221 für die Erwähnung der .text-truncateKlasse, die den Überlauf innerhalb des Labels verbirgt, wenn der ausgewählte Dateiname zu lang ist.

Ab Bootstrap 4.3 können Sie Platzhalter- und Schaltflächentext innerhalb des Beschriftungs-Tags ändern:

<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>

So ändern Sie die Sprache des Dateibrowsers:
Alternativ zu den von ZimSystem erwähnten Funktionen (Überschreiben des CSS) wird in den Bootstrap-Dokumenten eine elegantere Lösung vorgeschlagen: Erstellen Sie Ihre benutzerdefinierten Bootstrap-Stile, indem Sie Sprachen in SCSS hinzufügen.
Lesen Sie hier: https: //getbootstrap.com/docs/4.0/components/forms/#file-browser

Hinweis : Damit dies funktioniert, muss das lang-Attribut in Ihrem Dokument richtig eingestellt sein

So aktualisieren Sie den Wert bei der Dateiauswahl:
Sie können dies mit Inline-Js wie folgt tun:

   <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>

Hinweis : Der .split('\\').slice(-1)[0]Teil entfernt das Präfix C: \ fakepath \

Bootstrap 4

Weitere Details finden Sie hier https://learncodeweb.com/snippets/browse-button-in-bootstrap-4-with-select-image-preview/

Heute muss ich eine Schaltfläche zum Durchsuchen mit der Option "Dateien mit mehreren Uploads" erstellen. Alle oben genannten Snippets sind nicht gut für mich.

Das offizielle Bootstrap-Beispiel funktioniert auch nicht, wenn ich mehrere Dateien auswähle.

Ich habe mir diesen Code ausgedacht, der möglicherweise anderen in Zukunft helfen wird.

<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 form-control" 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>

Der js-Code ist unten angegeben.

$(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(","));
  });
});

Das Arbeitscodebeispiel wird hier mit Bootstrap 3 und Bootstrap 4.3.1 gegeben.

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

Hier ist die Antwort mit blauem Kastenschatten, Rand, Umriss entfernt mit Dateinamenkorrektur in der benutzerdefinierten Dateieingabe von Bootstrap. Wählen Sie Dateiname auswählen. Wenn Sie keine Datei auswählen, wird Keine Datei ausgewählt angezeigt .

    $(document).on('change', 'input[type="file"]', function (event) { 
        var filename = $(this).val();
        if (filename == undefined || filename == ""){
        $(this).next('.custom-file-label').html('No file chosen');
        }
        else 
        { $(this).next('.custom-file-label').html(event.target.files[0].name); }
    });

    input[type=file]:focus,.custom-file-input:focus~.custom-file-label {
        outline:none!important;
        border-color: transparent;
        box-shadow: none!important;
    }
    .custom-file,
    .custom-file-label,
    .custom-file-input {
        cursor: pointer;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container py-5">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Upload</span>
      </div>
      <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile01">
        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
      </div>
    </div>
    </div>

Ich füge dies einfach in meine CSS-Datei ein und es funktioniert:

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

Mit Hilfe von jquery kann dies so gemacht werden. Code:

$("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);}});

Für den Fall, dass Sie eine No-JQuery-Lösung benötigen

<label class="custom-file">
      <input type="file" id="myfile" class="custom-file-input" onchange="this.nextElementSibling.innerText = this.files[0].name">
      <span class="custom-file-control"></span>
</label>

Sie können das unten angegebene Snippet versuchen, um den ausgewählten Dateinamen aus dem Dateieingabetyp anzuzeigen .

document.querySelectorAll('input[type=file]').forEach( input => {
    input.addEventListener('change', e => {
        e.target.nextElementSibling.innerText = input.files[0].name;
    });
});

Lösung basierend auf der Antwort von @Elnoor, aber mit der Eingabe mehrerer Dateien zum Hochladen von Dateien und ohne den "Fakepath-Hack":

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(',    '));
});

Bootstrap 4.4:

Zeigen Sie eine choose fileBar. Nachdem eine Datei ausgewählt wurde, zeigen Sie den Dateinamen zusammen mit seiner Erweiterung an

<div class="custom-file">
    <input type="file" class="custom-file-input" id="idEditUploadVideo"
     onchange="$('#idFileName').html(this.files[0].name)">
    <label class="custom-file-label" id="idFileName" for="idEditUploadVideo">Choose file</label>
</div>

Wenn Sie es global für alle benutzerdefinierten Eingaben verwenden möchten, verwenden Sie den folgenden jQuery-Code:

$(document).ready(function () {
    $('.custom-file-input').on('change', function (e) {
         e.target.nextElementSibling.innerHTML = e.target.files[0].name;
    });
});

Für Bootstrap v.5

document.querySelectorAll('.form-file-input')
        .forEach(el => el.addEventListener('change', e => e.target.parentElement.querySelector('.form-file-text').innerText = e.target.files[0].name));

Beeinflusst alle Dateieingabeelemente. Es ist nicht erforderlich, die Element-ID anzugeben.

 <!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>

Ohne 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