如何获取文件上传按钮的文本？

Question

我正在为一个网络平台编写文档，我想在我的说明中引用一个文件上传按钮。但是，按钮上的确切文本取决于浏览器。例如，Firefox 将其称为Browse...，Chrome 将其称为Choose File。

<input type="file">

是否可以通过编程方式访问（而不是更改）该文本？我知道我可以检测浏览器并相应地在文档中设置文本，甚至可以使用解决方法来设置按钮文本，但这不是我要问的。

Answer 1

此文本由浏览器呈现特定 HTML 元素的方式设置。无法访问或更改该文本。它永远不会被加载到 DOM 中，因此也不能通过 jQuery 进行查找。

对于您的文档，您可能想说明文本的 IE 版本，然后列出 Chrome、Safari、Firefox 等。这是我能想到的向用户解释的最佳方式。

编辑

我只是想更新并提及 Shadow DOM，因为它对我来说很有趣而且很新。您可以在 Chrome 开发工具 -> 设置 -> 显示用户代理影子 DOM 中启用此功能。在那里，您实际上可以查看呈现的控件和为其设置的文本。虽然，它不能通过客户端脚本以编程方式访问。 :(

Answer 2

您可以为 input_id 使用标签并隐藏输入。

例子：

label {
/*Just to simulate a button, you will put your button style*/
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  color: initial;
}

input {
/*hide the inout*/
  width: 0px;
  outline:none;
  opacity:0;
  visibility:none;
  height:0px;
  display:none;
}

<label for="b1">
    Name
    <input type="file" id="b1">
</label>

工作DEMO。

Answer 3

是否可以通过编程方式访问（而不是更改）该文本？

不。无法访问以编程方式呈现文本的<input type="file"> ShadowDOM 内的<input> 元素的.value。显示ShadowDOM 的<input type="file"> DOM 元素的.shadowRoot 属性设置为null。

铬，铬在<input type="file"> 元素的<input type="file"> 元素.computedName 的input type="file" 属性处暴露<input type="button" value="Choose File" pseudo="-webkit-file-upload-button"> 的.value 和input type="file" 元素

const UPLOAD_BUTTON_TEXT = document.querySelector("input[type=file]")
.computedName;
console.log(UPLOAD_BUTTON_TEXT);

<input type="file" />

---

在铬，铬你可以查看元素

<input type="button" value="Choose File" pseudo="-webkit-file-upload-button">

它通过打开DevTools，选择Settings，检查Show user agent shadow DOM，然后检查<input type="file">元素来呈现host<input type="file">元素处的文本。

<input type="file">