Nome file nel browser di file - Bootstrap 4

Question

Nel browser di file in Boostrap 4 manca il nome del file. Dì solo Scegli file ... Ho creato una soluzione javascript per questo. C'è un modo migliore per risolverlo?

HTML

<label class="file"> 
    <input type="file" id="file1" > 
    <span class="file-custom" data-content="Choose file..."></span> 
</label> 

jQuery

$("input[type=file]").change(function(){ 
    var fieldVal = $(this).val(); 
    if (fieldVal != undefined || fieldVal != "") { 
     $(this).next(".file-custom").attr('data-content', fieldVal); 
    } 
}); 

CSS

.file-custom:after { 
    content: attr(data-content); 
} 

L'unica differenza è che si deve aggiungere dati contenuti al arco. D'altra parte rende più facile cambiare lingua.

link al browser di file Bootstraps: http://v4-alpha.getbootstrap.com/components/forms/#file-browser

Answer 1

Sembra Bootstrap è ora pendente verso non l'aggiunta di una soluzione di JS per questo e invece probabilmente sarà compreso qualcosa di simile lo script nella documentazione come implementazione suggerito, sulla base di I commenti di MDO qui, dove c'è anche una soluzione molto più completo: https://github.com/twbs/bootstrap/issues/20813

ho aggiornato il codice semplice per la Bootstrap 4 Alpha 6.

jQuery

$("input[type=file]").change(function() { 
    var fieldVal = $(this).val(); 
    if (fieldVal != undefined || fieldVal != "") { 
    $(this).next(".custom-file-control").attr('data-content', fieldVal); 
    } 
}); 

CSS

.custom-file-control:after { 
    content: attr(data-content) !important; 
} 

---

Edit:

È possibile che questo mostrerà qualcosa di simile C:\\fakepath... nell'input stile, possiamo anche ottenere solo il nome del file stesso a mostra, utilizzando event.target.files[0].name:

$("input[type=file]").change(function (event) { 
    var fieldVal = event.target.files[0].name; 
    if (fieldVal != undefined || fieldVal != "") { 
    $(this).next(".custom-file-control").attr('data-content', fieldVal); 
    } 
}); 

Answer 2

Facendo seguito alla risposta di Joey, per Bootstrap 4 rilascio pubblico si sarebbe ora utilizzare questo JS e nessun CSS:

$("input[type=file]").change(function() { 
    var fieldVal = $(this).val(); 
    if (fieldVal != undefined || fieldVal != "") { 
     $(this).next(".custom-file-label").text(fieldVal); 
    } 
});