CSS 如何使用HTML、JS和CSS创建自定义文件上传

在本文中，我们将介绍如何使用HTML、JS和CSS来创建一个自定义的文件上传。

阅读更多：CSS 教程

1. HTML标记

首先，在HTML中创建一个文件上传表单。使用<input type="file">标签可以实现文件选择功能。为了实现自定义样式，我们需要为文件上传表单创建一个外部容器，并向其添加样式。

<div class="file-upload">
  <input type="file" id="upload" class="input-file">
  <label for="upload" class="file-label">选择文件</label>
</div>

在上面的代码中，我们将文件上传<input>标签包装在一个<div>容器中，并为它们分别添加了input-file和file-label类。这些后面将用于添加样式。

2. CSS样式

接下来，我们将使用CSS来进行样式设置，以创建一个自定义的文件上传界面。

.file-upload {
  position: relative;
  display: inline-block;
}

.input-file {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.file-label {
  background-color: #007bff;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.file-label:hover {
  background-color: #0056b3;
}

在上面的代码中，我们为文件上传的<div>容器和<input>元素添加了样式。设置position: relative;使得<div>容器成为原点，而position: absolute;使得<input>元素覆盖在<div>容器上方。通过设置opacity: 0;来隐藏<input>元素，而cursor: pointer;可以将光标样式更改为手型以模拟点击行为。

同时，我们为文件上传的标签添加了背景颜色、字体颜色、内边距以及圆角等样式。当鼠标悬停在标签上时，我们使用:hover选择器来改变背景颜色，以增加交互性。

3. JS交互

除了样式外，我们还可以通过使用JavaScript来实现一些交互功能，例如在文件选择后显示文件名。

const uploadInput = document.getElementById('upload');
const fileLabel = document.querySelector('.file-label');

uploadInput.addEventListener('change', function() {
  const fileName = this.value.split('\').pop();
  fileLabel.innerText = fileName;
});

在上面的代码中，我们使用addEventListener来添加一个change事件监听器，当文件上传的<input>元素发生变化时触发回调函数。我们使用split('\').pop()来获取文件名，并将其设置为标签的文本内容。