实现多文件拖拽上传的简易Node项目，可以在github上下载，你可以先下载下来：https://github.com/Johnharvy/upLoadFiles/。
解开下载下的zip格式包，建议用webstom 运行该项目，通过app.js启动项目,如果提示找不到node.exe执行环境，请指定好你的node.exe安装位置。这里我用的express框架是3.21.2版本。
我们来简单介绍下拖拽效果是怎么实现的。
这里先看代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://www.jb51.net/js/jquery.js"></script> <script src="https://www.jb51.net/js/EventUtil.js"></script> <title>uploadFile</title> <style> #a1{width:100px;height:100px;background: #aaaaaa;text-align:center;line-height:100px;color:rgba(81, 49, 202, 0.72); margin:150px auto;} </style> </head> <body> <div>拖拽到此</div> <div></div> <script> var a1=document.getElementById("a1"); function handleEvent(event){ var info ="", output= document.getElementById("out-input"), files,i,len; EventUtil.preventDefault(event); //阻止事件的默认行为 var formData =new FormData(); if(event.type == "drop"){ files=event.dataTransfer.files; i = 0; len= files.length; while( i< len){ info += files[i].name +"("+ files[i].type + "," +files[i].size +"bytes)<br/>"; formData.append("file"+i,files[i]); i++; } output.innerHTML = info; $.ajax({ type:"post", url:"/uploadFile", data:formData, async: false, cache: false, contentType: false, processData: false, //此处指定对上传数据不做默认的读取字符串的操作 success:function(rs){ console.log(rs); }, error:function(r){ alert("文件上传出错！"); } }); } } EventUtil.addHandler(a1, "dragenter", handleEvent); EventUtil.addHandler(a1, "dragover", handleEvent); EventUtil.addHandler(a1, "drop", handleEvent); </script> </body> </html>
html内容很简单，一个显示允许的拖拽范围，一个用来显示上传文件内容的div块。
Js部分：
这里我准备了一个EventUtil接口对象，你也可以把它看成处理事件的很小的库，它的作用是封装了各个浏览器绑定相同事件的不同方法，为了实现各浏览器通用的事件绑定方法，统一用EventUtil对象来实现，你可以简单看下它的实现代码，非常简单。
当浏览器检测到拖拽的三种事件情况，“dragenter”，“dragover”，“drag"默认的行为会被阻止，当为”drag“情况时执行我们的自定义事件。
因为我们上传的是文件，所以这里用到了FormData的实例，通过append()添加文件到该对象中成为队列文件，上传到服务器端后会按队列顺序被解析成属性对象。事件中通过”event.dataTransfer.files“来获取事件中存储的文件。
这里还有一点需要注意的是jquery的ajax方法在上传文件对象时需要配置processData为false,意指不使用默认的读取字符串的操作。原因是默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，需要设置为 false。
文件上传成功后控制台会打印”{infor:"success”}“信息。
到此，前端部分结束，下面我们来看Node.js端的代码。
文件结构如下：
我们先看路由——app.js里的内容：
var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = require('http'); var path = require('path'); var app = express(); // all environments app.set('port', process.env.PORT || 3000); app.set('view engine', 'jade'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.json()); app.use(express.urlencoded()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(path.join(__dirname))); exports.app=app; var uploadAction=require("./Action/fileUpload"); //路由事件监听 uploadAction.uploadTest.uploadFile(); //文件上传监听 // development only if ('development' == app.get('env')) { app.use(express.errorHandler()); } app.get('/users', user.list); http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });
和初始的app.js有几点不同，我把app对象导出来以便在fileUpload.js中重复利用，然后引入了fileUpload.js模块，并通过该接口对象获得保存该模块所有方法的uploadTest对象并调用uploadFile方法。
好，最后我们来看fileUpload.js文件：