Bootstrap 4-Dateieingabe

76

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

javascript jquery css twitter-bootstrap bootstrap-4 Matej Vrzala M4
quelle
Diese Frage wurde zuvor hier beantwortet: stackoverflow.com/questions/37713126/…
Nathaniel Flick
nicht wirklich, ich habe gefragt, wie man den Inhalt von CSS-Eigenschaften ändert, da Bootstrap 4 dort den Text in diesem Ansatz rendert. Ich sehe den Wert nicht
Matej Vrzala M4
aber ich möchte dynamisch basierend auf dem Eingabewert darauf zugreifen. Wie kann ich das mit CSS machen?
Matej Vrzala M4
Haben Sie es zuerst geschafft, den Platzhalter- / Schaltflächenwert mit CSS zu ändern? Der Prozess der Auswahl des Wertes wurde in der anderen Frage beantwortet
Zim
Ich kann den Wert mit JS auswählen, aber in Bootstrap 4 befindet sich dieser 'Platzhalter'-Wert in :: after {content: "..."} und ich muss ihn ändern, um Änderungen zu sehen
Matej Vrzala M4

Antworten:

104

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)

Zim
quelle
8
C:\fakepath\...ziemlich lustig.
Gringo Suave
1
Woher kommt das C:\fakepath\...?
user14717
1
@ZimSystem Danke für die Lösung. Ich erhalte das gleiche C: \ fakepath \ .. in der Firefox Developer Edition. Gibt es eine Möglichkeit, dies zu beheben?
Mena
6
Ich habe dies verwendet, um den Dateinamen ohne "fakepath" zu erhalten:var fileName = document.getElementById("upload-image-input").files[0].name;
Ego
1
Ich nehme an, es hat sich irgendwann geändert, aber jetzt können Sie einfach den sichtbaren Textausschnitt ändern, indem Sie den Text des spanTags
festlegen
70

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.

Elnoor
quelle
1
Danke für den .split('\\').pop()Teil!
Raumbewegung
@spaceemotion glücklich, dass es geholfen hat
Elnoor
1
FWIW, ich musste type="file"dem <input>Tag hinzufügen . Aber sonst hat super geklappt.
Ghukill
1
@ghukill meine Antwort war ein schnelles Design-Ding, aber ich werde auch nur das typeAttribut hinzufügen , für diejenigen, die kopieren werden. Danke
Elnoor
5
Es lohnt sich zu sagen, dass Sie den Überlauf mit Text-class='custom-file-label text-truncate'
Trunkate
16

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>
Erweitern Sie das Snippet

Andrei Veshtard
quelle
Können Sie einen Link zur Bootstrap-Dokumentation bereitstellen?
Abdelsalam Shahlol
1
@AbdelsalamShahlol - getbootstrap.com/docs/4.3/components/forms/…
Andrei Veshtard
9

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 \

Razvan Pocaznoi
quelle
3
Nett. Verwenden Sie dies, um zu allen benutzerdefinierten Dateieingaben hinzuzufügen:$('.custom-file-input').change(function () { $(this).next().after().text($(this).val().split('\\').slice(-1)[0]); });
Jason
4

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

Zaid Bin Khalid
quelle
1
Eigentlich die nützlichste Antwort für mich also +1. Kleinere Verbesserung: Fügen Sie dem Beschriftungselement die Klasse 'form-control' hinzu.
Oldboy
2

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>
Erweitern Sie das Snippet

Soham Patel
quelle
1

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

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

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);}});
Sakhimpungose
quelle
1

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>
DP101
quelle
1

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;
    });
});
Codex schnell
quelle
0

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

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>
Aseem
quelle
0

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;
    });
});
Simon Tribus
quelle
0

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.

Die Realität
quelle
-1 
 <!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>
Ocool Sanni
quelle
-1

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

KliG
quelle