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

这是一个可能对你有帮助的替代解决方案。这将隐藏按钮外的文本，将其与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>

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

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

编辑:我现在看到的评论，你是关于按钮文本，而不是文件路径。我的坏。我将把我最初的答案留在下面，以防其他人偶然发现这个问题，以我最初的方式解释它。

我删除了这个答案，因为我认为我误解了这个问题，我的答案是不相关的。然而，另一个答案中的评论表明，人们仍然想看到这个答案，所以我将其删除。

我最初的回答(我以为OP是在问路径，而不是按钮文本):

出于安全原因，该特性不受支持。Opera网络浏览器曾经支持这一点，但它被删除了。想想如果这得到支持会发生什么;您可以创建一个带有文件上传输入的页面，用一些敏感文件的路径预先填充它，然后使用onload事件触发的javascript自动提交表单。这将发生得太快，用户无法对此采取任何措施。

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