更改输入类型 =“文件”中的默认文本？

Question

当我们使用 input="file" 时，我想更改按钮上的默认文本“ Choose File ”。

我怎样才能做到这一点？正如您在图像中看到的那样，按钮位于文本的左侧。我怎样才能把它放在文本的右侧？

原文由 Harry Joy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

每个浏览器都有自己的控件再现，因此您无法更改控件的文本或方向。

如果您想要一个 html / css 解决方案而不是 Flash 或 silverlight 解决方案，您可能想尝试一些“类型”的黑客攻击。

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

就个人而言，由于大多数用户坚持使用他们选择的浏览器，因此可能习惯于在默认呈现中查看控件，如果他们看到不同的东西，他们可能会感到困惑（取决于您正在处理的用户类型） .

原文由 Shiv Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将 for 属性 label 用于 input 。

 <div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

下面是获取上传文件名称的代码

---

 $("#files").change(function() {
  filename = this.files[0].name;
  console.log(filename);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label for="files" class="btn">Select Image</label>
    <input id="files" style="visibility:hidden;" type="file">
</div>

原文由 algometrix 发布，翻译遵循 CC BY-SA 4.0 许可协议