最基本的文件上传

原生 input

实现思路

1. 使用 <input type="file" /> 元素选择文件。

   如果需要多文件上传，可以添加 multiple 属性。

2. 监听 change 事件，获取用户选择的文件。

代码示例

html

<input type="file" id="fileInput" />

js

const fileInput = document.getElementById('fileInput')

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

原生 input 样式优化

实现思路

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>

css

.custom-upload-btn {
  box-sizing: border-box;
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 5px;
  background-color: #1677ff;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

.custom-upload-btn:hover {
  background-color: #4096ff;
}

js

const fileInput = document.getElementById('fileInput')

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

拖拽上传

实现思路

1. 监听拖拽事件：

   • dragenter 当文件进入目标区域时触发。
   • dragleave：当文件离开目标区域时触发。
   • dragover：当文件被拖拽到目标区域上方时触发。
   • drop：当文件被放下时触发。

2. 阻止默认行为 event.preventDefault()，如：防止浏览器打开文件。

3. 获取拖拽的文件 event.dataTransfer.files

   拖拽上传是默认支持多文件的。

代码示例

html

<div id="dropZone" class="drop-zone">拖拽文件到此区域上传</div>

css

.drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  color: #999;
  font-size: 20px;
  user-select: none;
}

.drop-zone.drag-over {
  border-color: #1677ff;
  background-color: #f0f8ff;
  color: #333;
}

js

const dropZone = document.getElementById('dropZone')

dropZone.addEventListener('dragenter', (event) => {
  event.preventDefault()
  dropZone.classList.add('drag-over') // 添加高亮样式
})

dropZone.addEventListener('dragover', (event) => {
  event.preventDefault() // 阻止默认行为，以允许触发 drop 事件
})

dropZone.addEventListener('dragleave', (event) => {
  event.preventDefault()
  dropZone.classList.remove('drag-over') // 移除高亮样式
})

dropZone.addEventListener('drop', (event) => {
  event.preventDefault() // 阻止默认行为，防止打开文件
  dropZone.classList.remove('drag-over') // 移除高亮样式

  const files = event.dataTransfer.files
  console.log('Dropped files:', files)
  // 处理文件上传逻辑
})