在前端开发中，我们常常需要上传文件。为了让用户方便地选择要上传的文件，HTML 提供了 <input type="file"> 元素，但是默认情况下会显示一个文本输入框和一个按钮。如果只想要显示一个按钮该怎么做呢？本文将介绍如何通过 CSS 和 JavaScript 实现这一功能。
CSS 实现
要隐藏文件选择框，可以使用 CSS 将其设置为不可见。但是，当用户点击按钮时，还需要触发文件选择框。为了达到这个目的，可以将 <input> 元素的 opacity 属性设置为 0，同时将 <label> 元素与 <input> 元素进行关联，使得单击标签时就相当于单击了文件选择框。
示例代码：
<label for="file-upload" class="custom-file-upload"> <i class="fa fa-cloud-upload"></i> 选择文件 </label> <input id="file-upload" type="file"/>
-- -------------------- ---- ------- ------------------- - ------- --- ----- ----- -------- ------------- -------- --- ----- ------- -------- - ------------------------- - ----------------- -------- - ------------------ - -------- -- --------- --------- ---- -- ----- -- ------ ----- ------- ----- ------- -------- -
这里的 <label> 元素中的 for 属性与 <input> 元素的 id 属性相对应，实现了两者之间的关联。
JavaScript 实现
使用 JavaScript 实现的方法更加灵活，可以根据需求添加更多的交互效果。例如，在用户选择完文件后，可以显示文件名或者上传进度等信息。
示例代码：
<div class="custom-file-upload"> <input type="file" id="file-upload" onchange="handleFileSelect()"/> <label for="file-upload">选择文件</label> <span id="file-info"></span> </div>
-- -------------------- ---- ------- ------------------- - ------- --- ----- ----- -------- ------------- -------- --- ----- ------- -------- - ------------------------- - ----------------- -------- - ------------ - -------- ----- -
-- -------------------- ---- -------
-------- ------------------ -
----- --------- - ---------------------------------------
----- ----------- - -------------------------------------
-- ----------------------- - -- -
----------------------- - -----------------------------------
- ---- -
----------------------- - ---
-
-在这个示例中，我们首先将 <input> 元素隐藏起来，然后在 <div> 元素中添加一个标签和一个用于显示文件信息的元素。当用户选择文件时，onchange 事件将触发 handleFileSelect 函数，该函数通过获取文件输入框的值并显示在页面上。
总结
本文介绍了通过 CSS 和 JavaScript 实现 <input type="file"> 元素只显示按钮的方法，并提供了示例代码。在实际开发中，可以根据需求选择适合自己的方法，并添加更多的交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10176