實現多文件拖拽上傳的簡易Node項目,能夠在github上下載,你能夠先下載下來:https://github.com/Johnharvy/upLoadFiles/。javascript
解開下載下的zip格式包,建議用webstom 運行該項目,經過app.js啓動項目,若是提示找不到node.exe執行環境,請指定好你的node.exe安裝位置。這裏我用的express框架是3.21.2版本。html
這裏先看代碼: 前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/jquery.js"></script> <script src="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 id="a1">拖拽到此</div> <div id="out-input"></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塊。java
這裏我準備了一個EventUtil接口對象,你也能夠把它當作處理事件的很小的庫,它的做用是封裝了各個瀏覽器綁定相同事件的不一樣方法,爲了實現各瀏覽器通用的事件綁定方法,統一用EventUtil對象來實現,你能夠簡單看下它的實現代碼,很是簡單。node
當瀏覽器檢測到拖拽的三種事件狀況,「dragenter」,「dragover」,「drag"默認的行爲會被阻止,當爲」drag「狀況時執行咱們的自定義事件。jquery
由於咱們上傳的是文件,因此這裏用到了FormData的實例,經過append()添加文件到該對象中成爲隊列文件,上傳到服務器端後會按隊列順序被解析成屬性對象。事件中經過」event.dataTransfer.files「來獲取事件中存儲的文件。git
這裏還有一點須要注意的是jquery的ajax方法在上傳文件對象時須要配置processData爲false,意指不使用默認的讀取字符串的操做。緣由是默認狀況下,經過data選項傳遞進來的數據,若是是一個對象(技術上講只要不是字符串),都會處理轉化成一個查詢字符串,以配合默認內容類型 "application/x-www-form-urlencoded"。若是要發送 DOM 樹信息或其它不但願轉換的信息,須要設置爲 false
。github
文件上傳成功後控制檯會打印」{infor:"success」}「信息。web
文件結構以下:ajax
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方法。
var multipart = require('connect-multiparty'); var App=require("../app"); var path = require('path'); var fs=require("fs"); var app=App.app; var uploadTest={}; function uploadFile(){ app.post("/uploadFile", multipart(),function(req,res) { var i=0; while(i != null){ if(req.files["file"+i]) upLoad(i); else{ i= null; res.json({infor:"success"});return;} i++; } //上傳隊列文件 function upLoad(index){ var filename = req.files["file"+index].originalFilename || path.basename(req.files["file"+index].path); //path接口能夠指定文件的路徑和文件名稱,"\結尾默認爲路徑,字符串結尾默認爲文件名" var targetPath = path.dirname("") + '/public/uploadFiles/' + filename; //fs建立指定路徑的文件並將讀取到的文件內容寫入 fs.createReadStream(req.files["file"+index].path).pipe(fs.createWriteStream(targetPath)); } }); } uploadTest.uploadFile=uploadFile; exports.uploadTest=uploadTest;
nodeJs老是很是簡便威猛的,並且具備高度的可創性,這也是我喜歡它的理由。咱們看到這裏的關鍵代碼其實不多,我簡單介紹下實現文件上傳的邏輯過程:
爲了實現上傳多個文件,我還作了一些匹配操做,很直觀,不難理解。
文件上傳成功後,會出如今public文件下的uploadFiles文件下。
文件中所用到的模塊都記錄在package.json中,能夠經過進入package.json的同級目錄地址經過指令」npm install「安裝。若是是直接運行github上下載的工程文件,就不用再安裝了。
若是你有任何問題,能夠給我留言,我會及時回答。