如何自定义<input type="file">？

Question

是否可以更改 <input type="file"> 的外观？

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

Answer 1

您不能对 input[type=file] 控件本身进行太多修改。

由于单击与输入正确配对的 label 元素将激活/聚焦它，我们可以使用 label 触发操作系统浏览对话框。

这是你如何做到的……

 label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}

 <label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

表单控件的 CSS 将使它看起来不可见，并且不会占用文档布局中的空间，但它仍然 _存在_，因此可以通过 label 激活它。

如果您想在选择后显示用户选择的路径，您可以使用 JavaScript 监听 change 事件，然后读取浏览器为您提供的路径（出于安全原因，它可能会 欺骗 您确切路径）。一种使最终用户看起来更漂亮的方法是简单地使用返回路径的基本名称（这样用户只会看到所选的文件名）。

Tympanus 提供了一个很好的样式指南。

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

Answer 2

也许是这样的？

 <form>
  <input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>

<script>
$(document).ready( function() {
  $('#falseinput').click(function(){
    $("#fileinput").click();
  });
});
$('#fileinput').change(function() {
  $('#selected_filename').text($('#fileinput')[0].files[0].name);
});

</script>

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