假定我们已经写好了网页样式

<div id="inputFile">
  此处内容省略...
</div>

点击选择文件

点击指定标签, 让其弹出文件选择框

有两种实现方法:

1. 通过浏览器的 FileSystem API 来弹出文件选择框: FileSystem
2. 通过创建 input 标签, 然后自动点击标签, 以此实现弹出文件选择框

方法一, 写起来方便直观, 但不推荐使用, 因为浏览器的兼容性极差
方法二, 实现不怎么优雅, 但兼容性极强推荐使用方法二

const clickTag = document.querySelector("#inputFile") // 触发文件选择框的标签
let fileObj = null // 待选择的文件对象

const choseFile = () => {
  const inputFile = document.createElement('input');
  inputFile.type = 'file';

  // 监控标签改动
  inputFile.onchange = () => {
    fileObj = inputFile.files[0];
  };
  inputFile.click();
};

// 事件监听器
clickTag.addEventListener('click', choseFile)

拖拽添加文件

要实现拖拽上传文件, 首先要添加四个不同类型的事件监听器
分别是:

• dragenter 文件拖入
• dragover 文件拖入并悬浮
• dragleave 文件拖出
• drop 丢下文件

const clickTag = document.querySelector("#inputFile") // 触发文件选择框的标签
let fileObj = null // 待选择的文件对象

inputFile.addEventListener('dragenter', watchDrag )
inputFile.addEventListener('dragleave', watchDrag )
inputFile.addEventListener('dragover', watchDrag )
inputFile.addEventListener('drop', watchDrag )

然后, 在回调函数中写入相关逻辑
当用户将文件拖入并释放后, drop 事件的 dataTransfer.files (即 e.dataTransfer.files) 文件列表会保存刚才拖入文件的File 对象

注意: e.dataTransfer.files 是文件列表, 并不能使用常规的列表操作函数

const watchDrag = e => {
  e.preventDefault()

  if (e.type === 'drop') {
    const fileListLength = e.dataTransfer.files.length
    fileObj = e.dataTransfer.files[fileListLength - 1] // 获取第一个拖入的文件
  } else if (e.type === 'dragleave') {
    // 样式更改的代码...
  } else {
    // 样式更改的代码...
  }

}