html5+express实现拖拽上传

html5的drag和drop

• drag和drop基本介绍

• drag：控件一开始拖的时候进行响应
• drop：拖拽中的控件放下的时候进行响应
• 具体可参考：http://www.w3school.com.cn/html5/html_5_draganddrop.asp

• html5实现拖拽响应

拖拽上传，我们拖拽的文件，并不需要它在拖拽前响应事件，只需要在拖拽后响应异步上传的事件，也就是实现drop方法，并在drop方法中将文件POST出去

  <div class='dropzone'>You can drop markdown file anywhere to upload </div>  <script type="text/javascript">    /* 给控件绑定drop事件 */    $('#dropzone').on('drop', function(event) {      /* 获取文件 */      var file = event.originalEvent.dataTransfer.files[0];      /* 采用FormData接口 相关信息：自行查询*/      var formData = new FormData();      formData.append('file', file);      $.ajax('/upload', {        method: 'POST',        contentType: false,        processData: false,        data: formData,        error: function(xhr, error) {          console.log('upload failed');        },        success: function(response) {          console.log('upload success');        }      });      return false;    })；  </script>

express路由响应

• 构建响应POST方法的路由

  var express = require('express');  var multipart = require('connect-multiparty');  var multipartMiddleware = multipart({    uploadDir: "./upload_tmp"  });  /* express 4.0后req.files不是默认参数，需要添加 connect-multiparty等 ， 具体可看官网：http://www.expressjs.com.cn/4x/api.html#req*/  var router = express.Router();  /* 该router响应的是 '/' 页面所有的POST，应对应上面html展示的页面，才会响应 ajax 中的upload  */  router.post('/', multipartMiddleware, function(req, res) {    var file = req.files.file;    var fileName = file.originalFilename;    var fileTmpPath = file.path;    if (file.ws.closed == true) {      try {        var newPath = path.join(mdPath, fileName);        fs.renameSync(fileTmpPath, newPath);      } catch (err) {        res.status(err.status || 500);        res.render('error', {          message: err.message || "server error",          error: err        });      }      res.send(newPath);    }  });