<input type="file" value="Browse" name="avatar" id="id_avatar" />
我尝试修改 value，但它不起作用。如何自定义按钮文本？
::file-selector-button 这样的伪元素。也许这些可以以某种方式使用。
使用 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.">
隐藏文件输入。创建一个新的输入来捕获点击事件并将其转发到隐藏的输入：
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
;。
您可以改为放置图像，并这样做：
HTML：
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
查询：
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
CAVEAT：在 IE9 和 IE10 中，如果您在通过 javascript 输入的文件中触发 onClick，表单将被标记为“危险”并且无法使用 javascript 提交，不确定是否可以传统方式提交。
<input type="file" ，其行可以动态添加..所以在点击图像时调用相关的输入点击触发器（同一行）将是一个真正的痛苦！ ：/
“上传文件...”文本由浏览器预定义，无法更改。解决此问题的唯一方法是使用基于 Flash 或 Java 的上传组件，例如 swfupload。
在所有浏览器上都能完美运行 希望它也对你有用。
HTML：
<input type="file" class="custom-file-input">
CSS：
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
将 content: 'Select some files'; 更改为 '' 中所需的文本
IF NOT WORKING WITH Firefox 然后使用这个而不是输入：
<label class="custom-file-input" for="Upload" >
</label>
<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
简单地
<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>
[使用片段编辑]
我认为这就是你想要的：
<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">
This 是一个 JQuery 插件，用于更改输入文件元素的按钮文本。
示例 HTML：
<input type="file" id="choose-file" />
示例 JS：
$('#choose-file').inputFileText({
text: 'Select File'
});
结果：
https://i.stack.imgur.com/grm5m.png
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
<span>Your name</span>
<input id="uploadBtn" type="file" class="upload" />
</div>
JS
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
更多http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
使用
<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;
}
我知道，没有人要求它，但如果有人使用引导程序，它可以通过标签和 CSS 伪选择器进行更改。
更改按钮文本：
.custom-file-label::after {
content: "What's up?";
}
对于更改字段文本：
<label class="custom-file-label" for="upload">Drop it like it's hot</label>
这是一个fiddle。
只有 CSS 和引导类
编辑：我现在看到您询问按钮文本而不是文件路径的评论。我的错。我会在下面留下我原来的答案，以防偶然发现这个问题的其他人按照我最初的方式解释它。
第二次编辑：我删除了这个答案，因为我认为我误解了这个问题并且我的答案不相关。但是，另一个答案中的评论表明人们仍然想看到这个答案，所以我取消删除它。
我的原始答案（我认为 OP 是在询问路径，而不是按钮文本）：
出于安全原因，此功能不受支持。 Opera 网络浏览器曾经支持此功能，但已被删除。想想如果支持的话会发生什么；您可以使用文件上传输入创建一个页面，使用某个敏感文件的路径预先填充它，然后使用由 onload 事件触发的 javascript 自动提交表单。这会发生得太快，以至于用户对此无能为力。
在 Bootstrap +4.5 中，您可以简单地将其添加到您的代码中：
.custom-file-input~.custom-file-label::after { content: "Your custom text ..."; }
在 之前，添加一个图像和 它将占用 的空间使用以下 CSS 到文件元素位置：相对;不透明度：0； z-指数：99；
您可以简单地添加一些 css 技巧。您不需要 javascript 或更多输入文件，我保留现有的 value 属性。你只需要添加css。你可以试试这个解决方案。
.btn-file-upload{ 宽度：187px;位置：相对； } .btn-file-upload:after{ 内容: attr(value);位置：绝对；顶部：0；左：0；底部：0；宽度：48%；背景：#795548；白颜色;边框半径：2px；文本对齐：居中；字体大小：12px；行高：2； }
这是一种使用纯 HTML 和 javascript “更改”具有文件类型的输入文本的方法：
<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
*The text you want*
</button>
对我来说，它不适用于带有引导文件样式的自定义文本。它有助于按钮装饰，但它的文字很奇怪要改变，在开始与 css 搏斗之前，我尝试以下方法：
$( document ).ready(function() {
$('.buttonText').html('Seleccione ficheros');
});
bootstrap-filestyle 使用名为 butonText 的类将组件渲染为 span，因此在加载文档时只需更改文本。很简单，它必须适用于所有浏览器。
干杯
如果您使用 rails 并且有问题应用它，我想从@Fernando Kosh 发布的原始答案中添加一些提示
下载文件 zip 并复制文件 bootstrap-filestyle.min.js ke 文件夹 app/assets/javascripts/
打开你的 application.js 并在下面添加这一行 //= require bootstrap-filestyle.min
打开你的咖啡并添加这一行 $(":file").filestyle({buttonName: "btn-primary",buttonBefore: true,buttonText: " Your text here",icon: false});
我为我的项目这样做：
.btn-outlined.btn-primary { 颜色：#000; } .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { 颜色:#000; } .btn-block { 显示：块；宽度：100%；填充：15px 0；边距底部：10px；字体大小：18px；字体系列：Arial、Helvetica、sans-serif；文本对齐：居中； }
这是一种可能对您有所帮助的替代解决方案。这隐藏了出现在按钮之外的文本，将其与 div 的背景颜色混合。然后你可以给 div 一个你喜欢的标题。
<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file" />
</div>
