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

示例HTML:

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

JS示例:

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

结果:

我认为这就是你想要的:

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

“上传文件…”文本是浏览器预先定义的，不能更改。 解决这个问题的唯一方法是使用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;
}

只有CSS和bootstrap类

< =铁路”链接stylesheet " href = " https://cdn.jsdelivr.net/npm/bootstrap@4 6。0 /区/ css / min bootstrap。css”诚信=“sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L - Z6nronJ3oUOFUFpCjEUQouq2 + l”crossorigin =“匿名”> <div class="col-md-4 inputting -group"> <输入类别=“form控制”类型=“文本”/> < div级= input-group-btn”> <标签for=“文件” <输入id=“文件”类型=“文件”/> < / div > < / div >

我知道，没有人要求它，但如果有人使用bootstrap，它可以通过标签和CSS伪选择器改变。

更改按钮文本:

.custom-file-label::after {
  content: "What's up?";
}

更改字段文本:

<label class="custom-file-label" for="upload">Drop it like it's hot</label>

这是小提琴。