如何在不使用库的情况下将默认名称“选择文件”更改为“选择文档”？ [复制]
Posted
技术标签:
【中文标题】如何在不使用库的情况下将默认名称“选择文件”更改为“选择文档”？ [复制]【英文标题】：How can I change the default name "Select file" to "Select document" without using libraries? [duplicate] 【发布时间】：2021-09-16 16:11:01 【问题描述】：我希望它的结构保持不变，仍然是按钮和显示文件名的标签，我希望能够更改按钮的名称。
<input class="form-control" type="file" value="Seleccionar documento">【问题讨论】：
这能回答你的问题吗？ How to change the button text of <input type="file" />? 您无法更改默认按钮。你要么改变结构，要么保持默认 我想要的是更改按钮的名称，并且文档的名称出现在我旁边，这样输入文件的结构就不会被修改 【参考方案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>【讨论】：
好的，但是如何获取我在侧面选择的文件的名称？以上是关于如何在不使用库的情况下将默认名称“选择文件”更改为“选择文档”？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何在不丢失 Xampp 中的数据的情况下将类型从 varchar 更改为 Date
imagemagick 在不使用 -extent 的情况下将画布更改为正方形（保留最长边）
在不使用php内置函数的情况下将每5个数字数组的排序从升序更改为降序，反之亦然