it-swarm-eu.dev

Bootstrap 4-Dateieingabe

Ich habe Probleme mit dem Bootstrap 4-Dateibrowser. Wenn ich die benutzerdefinierte Dateikontrolle verwende, sehe ich die ganze Zeit über Choose file value. 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 eigentlich in css .custom-file-control:lang(en)::after versteckt und ich weiß nicht, wie ich ihn in Javascript aufrufen und ändern kann. Ich kann den Wert der ausgewählten Datei folgendermaßen erhalten:

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

32
Matej Vrzala M4

Aktualisiert 2018

Bootstrap 4.1 +

Jetzt wird in Bootstrap 4.1 der Platzhaltertext "Choose file ..." im 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 Schaltflächentexts "Durchsuchen" erfordert ein wenig zusätzliches CSS oder SASS. Beachten Sie auch, wie Sprachübersetzung mit dem Attribut lang="" Funktioniert.

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

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

Eine weitere Bootstrap 4.1 Option

Alternativ können Sie dieses benutzerdefiniertes Dateieingabe-Plugin verwenden

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


Bootstrap 4 Alpha 6 (ursprüngliche Antwort)

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 ändert man den anfänglichen Platzhalter und den Schaltflächentext

In Bootstrap 4 wird der anfängliche Platzhalterwert in custom-file-control Mit einem CSS-Pseudo ::after - Element basierend auf der HTML-Sprache. Die anfängliche Dateischaltfläche (die eigentlich keine Schaltfläche ist, aber wie eine aussieht) wird mit einem CSS-Pseudoelement ::before Festgelegt. 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 - Abrufen des ausgewählten Dateinamenwerts und Aktualisieren der 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, es gibt 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 Klasse .selected Für .custom-file-control Umzuschalten, sobald die Datei ausgewählt wurde. Dadurch wird der ursprüngliche Platzhalterwert ausgeblendet. Geben Sie dann den Dateinamen in das Feld .form-control-file Ein ...

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

Sie können die Datei dann nach Bedarf hochladen oder erneut auswählen.

Demo zu Codeply (alpha 6)

55
Zim

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

Note: Vielen Dank an ajax333221 für die Erwähnung der .text-truncate-Klasse, die den Überlauf im Etikett verdeckt, wenn der ausgewählte Dateiname zu lang ist.

43
Elnoor

Zum Ändern der Sprache des Dateibrowsers:
Als Alternative zu dem, was ZimSystem erwähnt wurde (CSS überschreiben), schlagen die Bootstrap-Dokumente eine elegantere Lösung vor: Erstellen Sie Ihre benutzerdefinierten Bootstrap-Stile, indem Sie in SCSS Sprachen hinzufügen
Lesen Sie hier darüber nach: https://getbootstrap.com/docs/4.0/components/forms/#file-browser

Hinweis: Sie müssen das lang-Attribut in Ihrem Dokument richtig gesetzt haben, damit dies funktioniert

Zum Aktualisieren des Werts bei der Dateiauswahl:
Sie könnten es mit Inline-Js wie folgt machen:

   <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 Teil .split('\\').slice(-1)[0] entfernt das Präfix C:\fakepath \

5
Razvan Pocaznoi

Bootstrap 4

Weitere Details sind hierhttps://learncodeweb.com/snippets/browse-button-in-bootstrap-4-with-select-image-preview/

Heute muss ich eine Schaltfläche zum Durchsuchen mit der Option zum Hochladen mehrerer Dateien erstellen. Alle oben genannten Ausschnitte sind für mich nicht gut.

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

Ich habe mir diesen Code ausgedacht, der möglicherweise in Zukunft anderen 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" 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 Arbeitscode-Beispiel ist hier .

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

1
Zaid Bin Khalid

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

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


1
Robson Sousa

Ab Bootstrap 4.3 können Sie den Platzhalter- und Schaltflächentext im Label-Tag ä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>

0
Andrei Veshtard

Die Lösung basiert auf der Antwort von @Elnoor, arbeitet jedoch mit der Eingabe mehrerer 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(',    '));
});
0
Sicaa

Mit Hilfe von jquery kann das 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);}});
0
sakhii