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);
}
});