NodeJS與HTML5相結(jié)合實(shí)現(xiàn)拖拽多個(gè)文件上傳到服務(wù)器的實(shí)現(xiàn)方法
實(shí)現(xiàn)多文件拖拽上傳的簡(jiǎn)易Node項(xiàng)目,可以在github上下載,你可以先下載下來(lái):https://github.com/Johnharvy/upLoadFiles/。
解開下載下的zip格式包,建議用webstom 運(yùn)行該項(xiàng)目,通過(guò)app.js啟動(dòng)項(xiàng)目,如果提示找不到node.exe執(zhí)行環(huán)境,請(qǐng)指定好你的node.exe安裝位置。這里我用的express框架是3.21.2版本。
我們來(lái)簡(jiǎn)單介紹下拖拽效果是怎么實(shí)現(xiàn)的。
這里先看代碼:
<!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); //阻止事件的默認(rèn)行為 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, //此處指定對(duì)上傳數(shù)據(jù)不做默認(rèn)的讀取字符串的操作 success:function(rs){ console.log(rs); }, error:function(r){ alert("文件上傳出錯(cuò)!"); } }); } } EventUtil.addHandler(a1, "dragenter", handleEvent); EventUtil.addHandler(a1, "dragover", handleEvent); EventUtil.addHandler(a1, "drop", handleEvent); </script> </body> </html>
html內(nèi)容很簡(jiǎn)單,一個(gè)顯示允許的拖拽范圍,一個(gè)用來(lái)顯示上傳文件內(nèi)容的div塊。
Js部分:
這里我準(zhǔn)備了一個(gè)EventUtil接口對(duì)象,你也可以把它看成處理事件的很小的庫(kù),它的作用是封裝了各個(gè)瀏覽器綁定相同事件的不同方法,為了實(shí)現(xiàn)各瀏覽器通用的事件綁定方法,統(tǒng)一用EventUtil對(duì)象來(lái)實(shí)現(xiàn),你可以簡(jiǎn)單看下它的實(shí)現(xiàn)代碼,非常簡(jiǎn)單。
當(dāng)瀏覽器檢測(cè)到拖拽的三種事件情況,“dragenter”,“dragover”,“drag"默認(rèn)的行為會(huì)被阻止,當(dāng)為”drag“情況時(shí)執(zhí)行我們的自定義事件。
因?yàn)槲覀兩蟼鞯氖俏募?,所以這里用到了FormData的實(shí)例,通過(guò)append()添加文件到該對(duì)象中成為隊(duì)列文件,上傳到服務(wù)器端后會(huì)按隊(duì)列順序被解析成屬性對(duì)象。事件中通過(guò)”event.dataTransfer.files“來(lái)獲取事件中存儲(chǔ)的文件。
這里還有一點(diǎn)需要注意的是jquery的ajax方法在上傳文件對(duì)象時(shí)需要配置processData為false,意指不使用默認(rèn)的讀取字符串的操作。原因是默認(rèn)情況下,通過(guò)data選項(xiàng)傳遞進(jìn)來(lái)的數(shù)據(jù),如果是一個(gè)對(duì)象(技術(shù)上講只要不是字符串),都會(huì)處理轉(zhuǎn)化成一個(gè)查詢字符串,以配合默認(rèn)內(nèi)容類型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息,需要設(shè)置為 false。
文件上傳成功后控制臺(tái)會(huì)打印”{infor:"success”}“信息。
到此,前端部分結(jié)束,下面我們來(lái)看Node.js端的代碼。
文件結(jié)構(gòu)如下:
我們先看路由——app.js里的內(nèi)容:
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"); //路由事件監(jiān)聽 uploadAction.uploadTest.uploadFile(); //文件上傳監(jiān)聽 // 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有幾點(diǎn)不同,我把a(bǔ)pp對(duì)象導(dǎo)出來(lái)以便在fileUpload.js中重復(fù)利用,然后引入了fileUpload.js模塊,并通過(guò)該接口對(duì)象獲得保存該模塊所有方法的uploadTest對(duì)象并調(diào)用uploadFile方法。
好,最后我們來(lái)看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++; } //上傳隊(duì)列文件 function upLoad(index){ var filename = req.files["file"+index].originalFilename || path.basename(req.files["file"+index].path); //path接口可以指定文件的路徑和文件名稱,"\結(jié)尾默認(rèn)為路徑,字符串結(jié)尾默認(rèn)為文件名" var targetPath = path.dirname("") + '/public/uploadFiles/' + filename; //fs創(chuàng)建指定路徑的文件并將讀取到的文件內(nèi)容寫入 fs.createReadStream(req.files["file"+index].path).pipe(fs.createWriteStream(targetPath)); } }); } uploadTest.uploadFile=uploadFile; exports.uploadTest=uploadTest;
nodeJs總是非常簡(jiǎn)便威猛的,而且具有高度的可創(chuàng)性,這也是我喜歡它的理由。我們看到這里的關(guān)鍵代碼其實(shí)很少,我簡(jiǎn)單介紹下實(shí)現(xiàn)文件上傳的邏輯過(guò)程:
•獲取上傳文件的文件名
•設(shè)置文件的存儲(chǔ)位置,以及文件名稱
•讀取文件的內(nèi)容流并創(chuàng)建新文件寫入內(nèi)容流
為了實(shí)現(xiàn)上傳多個(gè)文件,我還做了一些匹配操作,很直觀,不難理解。
文件上傳成功后,會(huì)出現(xiàn)在public文件下的uploadFiles文件下。
文件中所用到的模塊都記錄在package.json中,可以通過(guò)進(jìn)入package.json的同級(jí)目錄地址通過(guò)指令”npm install“安裝。如果是直接運(yùn)行g(shù)ithub上下載的工程文件,就不用再安裝了。
以上所述是小編給大家介紹的NodeJS與HTML5相結(jié)合實(shí)現(xiàn)拖拽多個(gè)文件上傳到服務(wù)器的實(shí)現(xiàn)方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- js實(shí)現(xiàn)圖片上傳到服務(wù)器和回顯
- Node.js HTTP服務(wù)器中的文件、圖片上傳的方法
- JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能
- NodeJs實(shí)現(xiàn)簡(jiǎn)易WEB上傳下載服務(wù)器
- 詳解Node.js一行命令上傳本地文件到服務(wù)器
- js實(shí)現(xiàn)圖片粘貼上傳到服務(wù)器并展示的實(shí)例
- 基于HTML5+js+Java實(shí)現(xiàn)單文件文件上傳到服務(wù)器功能
- 利用nodejs監(jiān)控文件變化并使用sftp上傳到服務(wù)器
- Ajax上傳實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理的方法
- js實(shí)現(xiàn)上傳圖片到服務(wù)器
相關(guān)文章
Nodejs Post請(qǐng)求報(bào)socket hang up錯(cuò)誤的解決辦法
這篇文章主要介紹了Nodejs Post請(qǐng)求報(bào)socket hang up錯(cuò)誤的解決辦法,本文因少加了headers字段信息導(dǎo)致出現(xiàn)這個(gè)錯(cuò)誤,本文給出了一個(gè)完整的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09Node 創(chuàng)建第一個(gè)服務(wù)器應(yīng)用的操作方法
Node.js是一個(gè)基于Chrome V8引擎的JavaScript運(yùn)行環(huán)境,可以用于構(gòu)建高性能的網(wǎng)絡(luò)應(yīng)用程序,它采用事件驅(qū)動(dòng)、非阻塞I/O模型,使得程序可以以高效地方式處理并發(fā)請(qǐng)求,這篇文章主要介紹了Node 創(chuàng)建第一個(gè)服務(wù)器應(yīng)用,需要的朋友可以參考下2024-02-02在Node.js下運(yùn)用MQTT協(xié)議實(shí)現(xiàn)即時(shí)通訊及離線推送的方法
這篇文章主要介紹了在Node.js下運(yùn)用MQTT協(xié)議實(shí)現(xiàn)即時(shí)通訊及離線推送的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01nodejs通過(guò)phantomjs實(shí)現(xiàn)下載網(wǎng)頁(yè)
這篇文章主要介紹了nodejs通過(guò)phantomjs實(shí)現(xiàn)下載網(wǎng)頁(yè)的方法,有需要的小伙伴可以參考下。2015-05-05node.js使用http模塊創(chuàng)建服務(wù)器和客戶端完整示例
這篇文章主要介紹了node.js使用http模塊創(chuàng)建服務(wù)器和客戶端,結(jié)合完整示例形式分析了node.js基于http模塊實(shí)現(xiàn)客戶端與服務(wù)器端交互的相關(guān)操作技巧,需要的朋友可以參考下2020-02-02Node.js利用Express實(shí)現(xiàn)用戶注冊(cè)登陸功能(推薦)
這篇文章主要介紹了Node.js利用Express實(shí)現(xiàn)用戶注冊(cè)登陸功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10