更改选择文件按钮文本 - Html

有时我们需要在 HTML 网页中更改选择文件按钮的文本，以下是几种方法：

1. 使用标签的 for 属性绑定 input 标签

首先，我们可以使用 label 标签的 for 属性绑定 input 标签，这样点击 label 标签就会自动触发 input 标签的事件。接着，我们就可以在 label 标签中设置文本。

<label for="file-input">选择文件</label>
<input id="file-input" type="file" style="display: none;">

这里，我们给 input 标签设置了一个 ID 为 file-input，然后在 label 标签的 for 属性中赋值为 file-input，这样点击 label 标签就会触发 input 标签了。注意，我们还要给 input 标签设置 display:none，这样就可以隐藏它了。

2. 使用 CSS 隐藏 input 标签的文本

如果您想保留 input 标签而不使用 label 标签，可以使用以下 CSS 代码来隐藏其文本：

input[type="file"]::-webkit-file-upload-button {
  visibility: hidden;
}
input[type="file"]::before {
  content: '选择文件';
  display: inline-block;
  background: #f00;
  color: #fff;
  padding: 8px 20px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

这段代码将隐藏 input[type="file"] 的默认文本，并使用 ::before 伪元素来设置自定义文本。可以根据需求更改伪元素中的样式属性。

3. 使用 JavaScript 动态更改文本

最后，我们也可以使用 JavaScript 来动态更改按钮的文本。首先，我们要获取 input 标签，然后为其添加 onchange 事件，当用户选择文件时触发事件。在事件中，我们可以通过获取 input 标签的 value 值来得到用户选择的文件名，然后使用 JavaScript 来更改按钮的文本。

<input id="file-input" type="file" onchange="changeText()">
<button id="file-button">选择文件</button>

function changeText() {
  var fileInput = document.getElementById("file-input");
  var fileButton = document.getElementById("file-button");
  fileButton.innerHTML = fileInput.value.split('\\').pop();
}

在这段代码中，我们为 input 标签添加了 onchange 事件，并将其绑定到 changeText 函数上。当用户选择文件时，changeText 函数会执行，从而更改按钮的文本为用户选择的文件名。

以上是更改选择文件按钮文本的几种方法，您可以根据自己的需求选择其中一种来使用。