html5拖放上传文件

记录一个html5文件上传和接收的示例

前端

var droptarget = document.getElementById('droptarget');

function handleEvent(event) {
    event.preventDefault();
    var data, xhr;
    if (event.type === 'drop') {
      files = event.dataTransfer.files;
      console.log(files);
      data = new FormData();
      for (let i = 0, len = files.length; i < len; ++i) {
        data.append("file" + i, files[i]);
      }
      xhr = new XMLHttpRequest();
      xhr.open('post', "http://localhost:10000/filetest");
      xhr.onloadend = (e) => {
        // console.log(e);
        console.log(xhr);
      }
      xhr.send(data);
    }
}
droptarget.addEventListener('dragover', handleEvent);
droptarget.addEventListener('drop', handleEvent);

nodejs koa后端demo

var koa = require('koa');

var app = koa();
var parse = require('co-busboy');
var fs = require('fs');
app
  .use(function *(next) {
    this.res.setHeader("Access-Control-Allow-Origin", "*");
    this.res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    this.res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");
    yield next;
    
  })
  .use(function *(next) {
    if (this.request.is('multipart/*')) {
      var parts = parse(this);
      var part;
      while (part = yield parts) {
        part.pipe(fs.createWriteStream(part.fieldname));
      }
      this.body = 'ok';
    }
  })
  ;

if (!module.parent) {
  app.listen(10000);
  console.log('listening on port 10000');
}