如何创建自定义文件上传按钮

我觉得默认的 HTML 文件上传按钮太丑了。更烦人的是，好像没办法直接给它设置样式。下面是我创建自定义文件上传按钮的方法。

1. 使用标签标签并将其for属性指向默认 HTML 文件上传按钮的id

<!--default html file upload button-->
<input type="file" id="actual-btn"/>

<!--our custom file upload button-->
<label for="actual-btn">Choose File</label>

通过这样做，单击浏览器中的标签元素将切换默认的 HTML 文件上传按钮（就像我们直接单击它一样）。

上述代码的输出如下。如您所见，我们只有一个“选择文件”文本（来自标签元素），位于实际上传按钮右侧几个像素处。

我们可以点击选择文件文本，它将切换上传窗口（点击它查看）

2. 设置标签元素的样式并隐藏默认的 HTML 文件上传按钮

我们通过在标签中添加隐藏属性来隐藏浏览器中的默认 HTML 文件上传按钮，如下所示

<input type="file" id="actual-btn" hidden/>

现在我们将标签元素的样式设计得更像一个按钮。

label {
  background-color: indigo;
  color: white;
  padding: 0.5rem;
  font-family: sans-serif;
  border-radius: 0.3rem;
  cursor: pointer;
  margin-top: 1rem;
}

现在我们有了这个漂亮的自定义按钮，它实际上就像原始文件上传按钮一样工作：

至此，我们已经完成了。但还有一个问题需要解决。

默认文件上传按钮旁边会显示“未选择文件”的文本（向上滚动到第一个 Codepen 窗口），它会被替换成我们要上传的文件的名称。可惜的是，自定义按钮上看不到这个文本。该怎么做呢？

我所做的是在我们的自定义文件上传按钮之后立即包含一个span 标签（带有 file-chosen 的 id） 。

在JavaScript文件中，我监听了原始文件上传按钮（我们已将其隐藏）的change事件。返回一个文件对象，其中包含已上传文件的详细信息（例如名称、文件大小等）。

然后，我将span 元素（id 为 file-chosen）的文本内容设置为返回的文件对象的name属性。最终结果如下。测试一下。

请在下方留下您的评论和问题