如何在不使用库的情况下将默认名称“选择文件”更改为“选择文档”？ [复制]答案

【问题标题】：How can I change the default name "Select file" to "Select document" without using libraries? [duplicate]如何在不使用库的情况下将默认名称“选择文件”更改为“选择文档”？ [复制]
【发布时间】：2021-09-16 16:11:01
【问题描述】：

我希望它的结构保持不变，仍然是按钮和显示文件名的标签，我希望能够更改按钮的名称。

    &lt;input class="form-control" type="file" value="Seleccionar documento"&gt;

【问题讨论】：

这能回答你的问题吗？ How to change the button text of <input type="file" />?
您无法更改默认按钮。你要么改变结构，要么保持默认
我想要的是更改按钮的名称，并且文档的名称出现在我旁边，这样输入文件的结构就不会被修改

标签： javascript html jquery css

【解决方案1】：

使用标签：

div{
  position:relative;
}
input{
  display:none;
}

<div>
<input class="form-control" type="file" value="Seleccionar documento" id="upload">
<label for="upload"><button onclick="this.parentElement.previousElementSibling.click()">Choose File</button> Select document</label>
</div>

为了显示文件名，我们可以使用 JS 在输入字段中添加一个change 事件监听器来更新标签：

upload.addEventListener("change", function(){
  document.querySelector('label span').innerText = this.files[0].name;
})

div{
  position:relative;
}
input{
  display:none;
}

<div>
<input class="form-control" type="file" value="Seleccionar documento" id="upload">
<label for="upload"><button onclick="this.parentElement.previousElementSibling.click()">Choose File</button> <span>Select document</span></label>
</div>

【讨论】：

我添加的文件名不显示
@JuniorXD 更新了答案以添加对在上传时显示文件名的支持。
@JuniorXD 很高兴为您提供帮助 :)

【解决方案2】：

我认为它已经得到回答，请尝试查看此链接： Change default text in input type="file"?

从对我有用的同一来源中挑选的样本：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

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

</html>

【讨论】：

好的，但是如何获取我在侧面选择的文件的名称？