前端的文件操作：如何一步步的实现文件上传功能本篇将针对于文件上传功能的实现，从易到繁。从原生 Javascript +

基础篇

这一阶段我们仅需要将一个文件上传到指定的服务就好了。

第一步，准备一个 input

<input type="file" id="upload">

第二步，获取 DOM，给它绑定 change 事件

const upload = document.getElementById('upload');
upload.addEventListener('change', handleUploadValueChange);

第三步，实现监听函数

function handleUploadValueChange(e){
  // 数据获取（假设只有一个文件，多个则遍历）
  const fileName = e.target.files[0].name;
  const fileData = e.target.files[0];
  // 数据填充
  const sendData = new FormData();
  sendData.append(fileName, fileData);
  // 数据发送
  uploadData(sendData); // 假设实现了一个数据发送的函数
}

完整版代码：

（未完待续。。）