对我来说，它不工作自定义文本与bootstrap文件样式。它有助于按钮装饰，但文本是奇怪的改变，在与css摔跤之前，我尝试以下:

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap- filstyle使用名为buttontext的类将组件渲染为span，因此当文档加载时只需更改文本。很简单，它必须在所有浏览器上工作。

干杯

在Bootstrap +4.5中，你可以简单地将这个添加到你的代码中:

.custom-file-input ~。{后custom-file-label:: 内容:“您的自定义文本…”; ｝ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="匿名"> < div class = "定义文件”> <input type="file" class="custom-file-input"> <label class="custom-file-label">自定义占位符 < / div >

使用Bootstrap FileStyle，它用于样式化表单的文件字段。它是一个名为Twitter Bootstrap的基于jquery的组件库的插件

示例用法:

包括:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

通过JavaScript:

$(":file").filestyle();

通过数据属性:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">

“上传文件…”文本是浏览器预先定义的，不能更改。 解决这个问题的唯一方法是使用Flash或基于java的上传组件，比如swfupload。

使用<label>作为标题

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

这种工作不需要任何javascript。你可以随心所欲地把标签装饰成任何复杂程度。当您单击标签时，单击会自动重定向到文件输入。任何方法都可以使文件输入本身不可见。如果你想让标签看起来像一个按钮，有很多解决方案，例如:

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

除了MushyPeas的答案，你可以添加一个标签来显示文件名(不需要jQuery): 也要归功于这个答案。

<input type="button" id="click-input" value="Write anything" onclick="document.getElementById('file').click();" /> <label for="click-input" id="file-name">Bla bla</label> <input type="file" style="display:none;" id="file"> <script> inputElement = document.getElementById('file') labelElement = document.getElementById('file-name') inputElement.onchange = function(event) { var path = inputElement.value; if (path) { labelElement.innerHTML = path.split(/(\\|\/)/g).pop() } else { labelElement.innerHTML = 'Bla bla' } } </script>