你可以简单地添加一些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" />

在<input type="file">之前，添加一个图像，并且<input style="position:absolute">，它将占据<input type="file">的空间 对file元素使用下面的CSS 位置:相对; 透明度:0; z - index: 99;

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

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

更改按钮文本:

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

更改字段文本:

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

这是小提琴。

简单的

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

[编辑片段]

<link href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” rel=“stylesheet”/> <link href=“https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=“stylesheet”/> <label class=“btn btn-primary”> <i class=“fa fa-image</i>”> 你的文本在这里<输入类型=“文件” 样式=“显示：无;” 名称=“图像”> </label>

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