自定义上传控件样式

实现思路

1. 隐藏原生的 <input type="file"> 元素（display: none）。
2. 使用 <label> 标签，并通过 for 属性关联到隐藏的文件输入框。
3. 自定义 <label> 的样式，使其看起来像一个按钮或其他 UI 元素。
4. 用户点击自定义的 <label> 时，会触发隐藏的文件输入框，打开文件选择对话框。

代码示例

html

<input type="file" id="fileInput" style="display: none;" />
<label for="fileInput" class="custom-upload-btn">选择文件</label>

js

const fileInput = document.getElementById('fileInput')

fileInput.addEventListener('change', (event) => {
  const files = event.target.files
  console.log('Selected files:', files)
  // 处理文件上传逻辑
})