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

你可以简单地添加一些css技巧。你不需要javascript或更多的输入文件，我保持现有的值属性。您只需要添加css。你可以试试这个解决方案。

.btn-file-upload { 宽度:187 px; 位置:相对; ｝ .btn-file-upload:{后 内容:attr(价值); 位置:绝对的; 上图:0; 左:0; 底部:0; 宽度:48%; 背景:# 795548; 颜色:白色; border - radius: 2 px; text-align:中心; 字体大小:12 px; 行高:2; ｝ <input type="file" class="btn-file-upload" value="Uploadfile" />

在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.">

I did it like this for my project: .btn-outlined.btn-primary { color: #000; } .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { color:#000; } .btn-block { display: block; width: 100%; padding: 15px 0; margin-bottom: 10px; font-size: 18px; font-family: Arial, Helvetica, sans-serif; text-align: center; } <label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label> <input type="file" id="fileUpload"style="display: none;">

这是一个JQuery插件，用于更改输入文件元素的按钮文本。

示例HTML:

<input type="file" id="choose-file" />

JS示例:

$('#choose-file').inputFileText({
    text: 'Select File'
});

结果: