HTML 如何从 type=file 输入中去除“未选择文件”

在本文中，我们将介绍如何从 HTML 的 type=file 输入中去除默认的“未选择文件”。当我们在网页上提供文件上传功能时，当用户没有选择文件时，一般会显示“no file selected”或“未选择文件”的文本提示。然而，有时我们可能希望去除这个默认的提示文本，以实现更好的用户体验。

阅读更多：HTML 教程

方法一：使用 JavaScript

一种常见的去除“未选择文件”提示的方法是使用 JavaScript。我们可以通过监听 type=file 的 onchange 事件来实现。

<!DOCTYPE html>
<html>
<head>
<script>
function removeNoFileSelectedText(input) {
  if (input.files.length === 0) {
    input.nextElementSibling.textContent = "";
  } else {
    input.nextElementSibling.textContent = input.files[0].name;
  }
}
</script>
</head>
<body>

<input type="file" id="myFile" onchange="removeNoFileSelectedText(this)">
<label for="myFile"></label>

</body>
</html>

上面的代码中，我们定义了一个名为 removeNoFileSelectedText 的 JavaScript 函数。这个函数会根据用户选择的文件来更新 input 元素后面的 label 元素的文本内容。当用户没有选择文件时，文本内容会被清空，否则会显示用户选择的文件名。

<input type="file" id="myFile" onchange="removeNoFileSelectedText(this)">
<label for="myFile"></label>

上面的代码片段演示了如何在 HTML 中使用这个方法。我们在 input 元素上添加了 onchange 事件监听，并将当前的 input 元素作为参数传递给 removeNoFileSelectedText 函数。label 元素则用于显示用户选择的文件名。

方法二：使用 CSS

除了使用 JavaScript 外，我们还可以通过 CSS 来隐藏“未选择文件”的提示文本。这种方法适用于我们并不需要获取用户选择的文件名，只是简单地隐藏提示文本。

<!DOCTYPE html>
<html>
<head>
<style>
input[type="file"]::-webkit-file-upload-button {
  visibility: hidden;
}
input[type="file"]:before {
  content: '选择文件';
  color: white;
  background-color: #3d89c2;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>
</head>
<body>

<input type="file" id="myFile">
<label for="myFile"></label>

</body>
</html>

上面的代码中，我们使用 CSS 的 ::-webkit-file-upload-button 伪元素来隐藏默认的文件上传按钮。然后，我们使用 ::before 伪元素在 input 元素之前插入了一个带有自定义样式的文本，作为替代的文件选择按钮。用户点击这个文本时，实际是触发了隐藏的文件上传按钮。

<input type="file" id="myFile">
<label for="myFile"></label>

上面的代码片段演示了如何在 HTML 中使用这个方法。我们只需要在 input 元素后面添加一个 label，通过设置 for 属性与 input 的 id 相关联，即可实现点击文本来选择文件的效果。

总结

通过 JavaScript 和 CSS，我们可以从 HTML 的 type=file 输入中去除默认的“未选择文件”提示。使用 JavaScript 可以动态地根据用户选择的文件来更新文本内容，而使用 CSS 则是隐藏默认的提示文本并自定义替代的文件选择按钮。根据实际需求，选择合适的方法来改善用户体验。