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

在Web开发中，文件上传功能是常用的基础需求。通过自定义文件上传按钮，不仅可以美化页面，也可以增加一些自定义的功能，如文件格式判断等。本文将介绍如何通过HTML、CSS和JavaScript创建一个简单的自定义文件上传按钮。

HTML

首先，在HTML中创建一个含有input元素的form表单，如下所示：

<form class="upload-form">
  <label for="file" class="upload-label">
    <span class="upload-icon"></span>
    <span class="upload-text">选择文件</span>
  </label>
  <input type="file" name="file" id="file" class="upload-input">
</form>

其中，input元素的类型为file，表示这是一个文件上传输入框。label元素的for属性与input元素的id属性相同，表示二者关联，点击label元素即可触发input元素的点击事件。

CSS

接着，在CSS中设置label元素的样式，让其看起来像一个按钮，如下所示：

.upload-label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #70C1B3;
  color: #ffffff;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.upload-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-image: url('upload.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

其中，.upload-label表示label元素的样式，设置了背景色、字体颜色、圆角等。.upload-icon表示上传按钮的图标，可以替换为合适的图片，其宽度、高度、外边距等可以自行调整。

JavaScript

最后，在JavaScript中编写事件监听函数，处理文件上传逻辑，如下所示：

const form = document.querySelector('.upload-form');
const input = form.querySelector('.upload-input');

input.addEventListener('change', () => {
  const file = input.files[0];

  if (file) {
    // 处理上传逻辑
    console.log(file.name);
  }
});

监听input元素的change事件，当选择了文件后触发回调函数。通过input.files[0]获取选择的文件，进行上传逻辑处理即可。

至此，一个简单的自定义文件上传按钮就创建完毕了。完整代码如下所示：

<form class="upload-form">
  <label for="file" class="upload-label">
    <span class="upload-icon"></span>
    <span class="upload-text">选择文件</span>
  </label>
  <input type="file" name="file" id="file" class="upload-input">
</form>

<style>
.upload-label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #70C1B3;
  color: #ffffff;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.upload-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-image: url('upload.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
</style>

<script>
const form = document.querySelector('.upload-form');
const input = form.querySelector('.upload-input');

input.addEventListener('change', () => {
  const file = input.files[0];

  if (file) {
    // 处理上传逻辑
    console.log(file.name);
  }
});
</script>