實現多文件拖拽上傳的簡易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="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塊。
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 environmentsapp.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 onlyif ('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文件：
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上下載的工程文件，就不用再安裝了。
以上所述是小編給大家介紹的NodeJS與HTML5相結合實現拖拽多個文件上傳到服務器的實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
