//Javascript代码
let filesSet = []; //文件保存数组
let fileList = document.getElementById('fileList'); //获取显示文件列表DOM

/**
 * 创建一个新的空白的文档片段frag
 * 用于附加多个待上传文件的DOM,可减小回流
 * https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment
 */
let frag = document.createDocumentFragment();
let barDom = createProccessBar(); //创建进度条DOM
let submit = document.getElementById("submit") //获取提交按钮


/* 拖动到放置区域时 */
function dragover_hander (event) {
  /* 必须同时阻止dragover和drop的默认事件
     否则会响应浏览器默认行为
     浏览器器能显示的文件会直接显示，例如html文件、图片文件
     浏览器器不能显示的文件会出现文件下载弹窗
  */
  event.preventDefault(); 
}

/*拖放完成事件*/
function drop_hander (event) {

    event.preventDefault(); //阻止默认事件

    var files = event.dataTransfer.files; //通过dataTransfer对象获取文件对象数组

    for(let file of files) { //遍历文件对象数组

       //创建文件信息显示DOM,并保存在file对象的element属性中，用于后续操作
       file.element = createFileDom(file, filesSet.length)
       //复制进度条DOM,并保存在file对象的processBar属性中，用于后续操作
       file.processBar = filesSet.length?barDom.cloneNode(true):barDom;
       //将进度条添加至文件信息显示DOM中
       file.element.appendChild(file.processBar);
       //file文件对象添加到文件保存数组
       filesSet.push(file);
       //创建文件信息显示DOM添加至文档片段frag
       frag.appendChild(file.element);
    }

    //将文件列表添加至显示文件列表的div
    fileList.appendChild(frag)
}


/**
 * 创建文件信息显示DOM
 * file  文件对象，用于获取文件信息
 * index 文件对象在数组中的索引，用于删除
 */
function createFileDom (file, index) {
  let p = document.createElement('p'); 
  //file.name属性可以获得文件名称
  //有兴趣的童鞋，可以使用for...in循环查看一下file对象的其它属性值
  let text = document.createTextNode(file.name); 
  let span = document.createElement("span");
  span.setAttribute('index', index); //索引添加至按钮的index属性
  span.className = 'close-btn'; 
  p.appendChild(text);
  p.appendChild(span);

  return p; //返回文件信息显示DOM
}
/**
 * 创建进度条DOM,
 * 进度条DOM结构固定，可使用clone(true)进行复制
 * @return {[type]} [description]
 */
function createProccessBar() {
  let bar =  document.createElement("span");
  let rate = document.createElement("span");
  let text = document.createElement("span");
  bar.className = "process-bar";
  rate.className = "process-rate";
  text.className = "process-text";
  text.innerText="0%";
  bar.appendChild(text);
  bar.appendChild(rate);
  return bar; 
} 

//通过事件代理，监听移除或中止上传
fileList.addEventListener('click', (evt)=>{
  let index = evt.target.getAttribute('index'); //获得index属性值
  if (index) { //存在index属性值，表示点击了删除按钮

    if (filesSet[index].unloading && filesSet[index].req) { //文件已经上传中
      filesSet[index].req.abort(); //中止上传
      filesSet[index].unloading = false;  //将上传中的状态设置为false 
    } else { //未开始上传
      filesSet[index].element.remove(); //移除DOM
      filesSet[index].element = null; //释放对DOM的引用
      filesSet[index].processBar = null;//释放对DOM的引用
      delete filesSet[index];//删除文件数组中对应的元素 
    }

  }
})

submit.addEventListener('click',function(){// 为上传按钮绑定事件

  //这里使用for...in循环,正好可以避免对数组稀疏元素的遍历
  for(let key in filesSet){
    //如果正在上传中或已经上传完成，不再上传
    if (filesSet[key].unloading || filesSet[key].uploaded) continue; 
    filesSet[key].unloading = true; //标记开始上传

    //创建一个文件上传的Promise，并设置成功及失败的回调
    initUpload(filesSet[key]).then(file => {
      //上传成功
      file.element.className = "success"; //UI显示成功信息
      file.uploaded = true; //标记上传成功
    }).catch((file, err) => {
      file.element.className = "error"; //UI显示失败信息
      //取消开始上传标记，点击上传按钮将尝试再次上传
      filesSet[key].unloading = false; 
    })
  }
})

/**
 * 返回一个文件上传的Promise实例
 * @param  {[type]} file 要上传的文件
 */
function initUpload(file){

  return new Promise((res, rej) => {
    let formData = new FormData();//声明一个FormData实例
    let req = new XMLHttpRequest();//创建XHR实例
    let reta = file.processBar.querySelector('.process-rate');//获得进度条DOM
    let text = file.processBar.querySelector('.process-text');//获得进度文本DOM
    let pre;//保存上传百分比
    //监听数据传输进行中
    req.upload.onprogress =function(data){ 
      pre = (data.loaded/data.total*100).toFixed(2);//计算百分比
      reta.style.width = pre +'%';//修改进度条
      text.innerText = pre +'%' ;//修改进度条文本
    }
    //监听请求完成
    req.onreadystatechange = function () {
      if (req.readyState !==4 ) return ; 
      if (req.status === 200 ){
        //完成，执行成功回调
        res(file, req)
      } else {
        //失败，执行失败回调
        rej(file, req)
      }
    }
    formData.append('file',file); //使用append方法添加文件到file键
    req.open('POST', '/process_post'); //初始化请求
    req.send(formData); //发送请求
    file.req = req; //保存req对象，用于中止请求
    //形如显示上传进度
    file.element.className = "uploading"        
  })
}

/* 拖动到放置区域时 */
function dragover_hander (event) {
	/* 必须同时阻止dragover和drop的默认事件
	   否则会响应浏览器默认行为
	   浏览器能显示的文件会直接显示，例如html文件、图片文件
	   浏览器不能显示的文件会出现文件下载弹窗
	*/
	event.preventDefault(); 
}

/*拖放完成事件*/
function drop_hander (event) {

    event.preventDefault(); //阻止默认事件

    var files = event.dataTransfer.files; //通过dataTransfer对象获取文件对象数组
    var formData = new FormData(); //声明一个FormData实例

    for(var i = 0, len = files.length; i < len; i++) {
    	//使用append方法添加文件到file键
        formData.append('file',  files[i]);
    }

    var request = new XMLHttpRequest(); //创建XHR实例
	request.open('POST', '/process_post'); //初始化请求
	request.send(formData);//发送请求
}

const express = require('express'); //引入express模块
const app = express(); //创建一个express应用
const multer = require('multer'); // 引入multer模块

/*
 新建一个multer中间件，设置文件保存路径
 路径必须存在，否则会报错
*/
const upload = multer({ dest: 'uploads/' }); 

/* 请求/drop.html，返回文件 */
app.get('/drop.html', function (req, res) {
   res.sendFile( __dirname + "/" + "drop.html" );
})

/* 
创建提交接口
使用中间件处理
upload.array('file')表示上传一个名为file文件数组
 */
app.post('/process_post', upload.array('file'), function (req, res,next) {
 
  if (!req.files) { // 末上传文件的返回
    res.json({ ok: false });
    return;
  }
  //有上传文件,返回文件列表
  res.json(req.files) 
  return;
})

//启动服务，监听8081端口
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
 
})

h5-drop-upload
|- /uploads
|- drop.html
|- formupload
|- package.json

node formupload.js

应用实例，访问地址为 http://:::8081