Nodejs express、html5實現拖拽上傳

Nodejs express、html5實現拖拽上傳

1、前言

      文件上傳是一個比較常見的功能，傳統的選擇方式的上傳比較麻煩，須要先點擊上傳按鈕，而後再找到文件的路徑，而後上傳。給用戶體驗帶來很大問題。html5開始支持拖拽上傳的須要的api。nodejs也是一個最近愈來愈流行的技術，這也是本身第一次接觸nodejs，在nodejs開發中，最經常使用的開發框架之一是expess，它是一個相似mvc模式的框架。結合html五、nodejs express實現了拖拽上傳的功能。

2、基礎知識普及

一、NodeJs基礎知識

    nodejs簡單來講就是一個可讓js在服務端也能運行的開發平臺，nodejs發展很是很快，不少國內公司也已經開始使用好比淘寶等。傳統的web應用程序開發平臺依靠多線程來實現高併發請求的響應。而nodejs採用了單線程、異步式IO、事件驅動的設計模型，給nodejs帶來了巨大的性能提高。這也是nodejs最大的特色，在nodejs中，全部的IO操做都是經過回調的方式進行，nodejs在執行IO操做時會把IO請求推送一個事件隊列，等待程序進行處理，等處理完IO，而後調用回調函數返回結果。

好比在查詢數據庫操做以下：   

mysql.query("SELECT * FROM myTable",function(res){ callback(res); });

在以上代碼中，nodejs在執行以上語句時,不會等待數據庫返回結果，而是繼續執行後面的語句。在數據庫獲取到數據後，會發送到事件循環隊列中，等到線程進入事件循環隊列後，才執行callback的東西。

關於nodejs更多的知識，我也知識看了兩天，瞭解很少。瞭解更多的知識能夠在網絡上搜索。

nodejs入門的知識 http://www.nodebeginner.org/index-zh-cn.html  http://blog.jobbole.com/17174/

二、express基礎知識

     nodejs是一個比較活躍的開源社區，它擁有大量的第三方開發庫，其中Express是其中最普遍的、最經常使用的框架之一。也是nodejs官方推薦的框架。它除了對常見http操做的封裝，還實現了路由控制、模版解析支持、動態試圖、用戶回話等等。但它也不是一個萬能的框架，絕大多數功能是對http的封裝，它只是一個輕量級的框架。不少功能還須要集成第三方庫還實現。

     exress提供了很是方便的上傳功能的支持，在文件上傳請求之後，express會接收文件並把文件存在一個臨時目錄，而後在路由到的方法中，咱們只需把文件從臨時目錄下拷貝到咱們要存放用戶上傳文件夾便可。在文件上傳部分，服務器端的實現就是基於express這個功能來實現的。

三、html5拖曳上傳api

    html5提供不少新的特性，拖拽事件以及文件上傳就是新特性之一。因爲篇幅有限，後面重點介紹拖曳上傳的代碼實現。就不一一列出html5提供的拖曳上傳的apil了，感興趣的能夠參考：http://w3school.com.cn/html5/html5_ref_eventattributes.asp#Mouse_Events     http://wen866595.iteye.com/blog/1898236

3、拖曳上傳實現

一、代碼實現

先來看下前端js的文件目錄：

其中：

uploader.js主要實現對html5支持的上傳功能的封裝。

uploaderQueue.js主要實現上傳文件隊列的管理，以及文件上傳對象，把文件隊列中的文件上傳到服務器。

uploaderApp.js主要文件上傳的入口，主要實現上傳窗口對拖曳事件的監聽並把拖曳文件推動上傳文件隊列，啓動文件上傳程序。

下面對核心代碼(須要)作簡單的解釋，全都代碼能夠到這裏下載：FileUploader

首先對html5提供的文件上傳作簡單的封裝uploader.js

  View Code

var uploaderFactory = { send: function (url, data, files, callback) { var insUploader = new uploader(url, data, files); insUploader.callback = function (status, resData) { if (typeof callback === 'function') { callback(status, resData); } } insUploader.send(); return insUploader; } };

uploader對象主要是對html5提供的原生api進行簡單的封裝。uploaderFactory提供一個簡單的接口，使用它能夠像jquery的ajax方法同樣完成，文件上傳調用。html5中提供的文件上傳的支持，是在原來XMLHttpRequest基礎之上擴展一些屬性和方法，提供了FormData對象，來支持文件上傳操做。

文件上傳隊列(uploaderQueue.js)也是一個比較重要的對象，它包括兩個對象一個是Queue，文件隊列對象，主要負責管理文件隊列的增刪改查詢等操做，另外一個對象是UploadEngine，文件上傳引擎，它的功能主要是負責從文件隊列中取出文件對象，調用uploader對象上傳文件，而後更新文件隊列中的文件狀態。Queue以及UploadEngine都是單例對象。

首先來看下文件隊列對象：

  View Code

上傳文件隊列使用一個數組管理每一個文件對象信息，每一個文件對象有key,data,status三個屬性，該對象主要負責文件對象的增長、刪除、更新、查找的功能。

上傳文件隊列中另外一個比較重要的對象是上傳引擎對象（uploadEngine.js）

  View Code

該對象比較簡單主要提供一個run以及setUrl方法，用於啓動上傳引擎，以及設置上傳路徑的功能。內部使用遞歸的方法把文件隊列中的方法所有上傳到服務端。使用uploadItemProgress通知外部上傳的進度，使用uploadStatusChanged通知文件上傳狀態，以便更新UI.

uploaderApp.js中主要包括三個對象，一個是相似jquery的一個簡單的jquery對象（App$）。主要用於綁定事件。一個是uploaderArea對象，是拖曳上傳的窗口區域，另外一個是入口對象uploaderMain對象。主要用於初始化對象，對外部提供一個init方法，來初始化整個對象。

瞭解關於App$以及uploaderArea對象的代碼請下載源代碼，下面僅對uploaderMain對象作簡單的說明。

(function (app) { var _self; function uploaderMain(id) { this._id = id; this._area = null; this.uploaders = []; this._URL = 'file/uploader'; } uploaderMain.prototype = { init: function () { _self = this; this._initArea(); this._initQueueEng(); }, _initQueueEng: function () { uploaderQueue.Engine.setUrl(this._URL); uploaderQueue.Engine.uploadStatusChanged = function (key, status) { if (status === uploaderQueue.UploadStatus.Uploading) { _self._area.hideItemCancel(key); } else if (status === uploaderQueue.UploadStatus.Complete) { _self._area.completeItem(key); _self._area.showItemCancel(key); } } uploaderQueue.Engine.uploadItemProgress = function (key, e) { var progress = e.position / e.total; _self._area.changeItemProgress(key, Math.round(progress * 100)); } }, _initArea: function () { this._area = new app.area(this._id); this._area.init(); this._area.drop = function (e) { var key = uploaderQueue.Queue.add({files: e.dataTransfer.files}); uploaderQueue.Engine.run(); return key; } this._area.cancelItem = function (key) { uploaderQueue.Queue.remove(key); } } }; app.main = uploaderMain; })(window.uploaderApp);

在uploaderMain對象，至關於各個對象之間的中介，主要就是作對象的初始化功能、以及對象之間相互調用。使各個對象之間相互協做完成整個模塊的功能。對外提供一個init方法來初始化整個程序，在html頁面中只需以下代碼：

<script type="text/javascript"> var main=new uploaderApp.main('container'); main.init(); </script>

以上代碼就是建立一個入口對象，而後使用init方法來啓動整個程序。

以上是對前端js的主要方法作的簡單解釋，若是想詳細瞭解請下載源代碼。下面簡單看下後端js（nodejs）端實現的主要代碼。

在express基礎知識時，已經講過在express已經對文件上傳功能作了完整的封裝，當路由到action時，文件已經完成上傳只是文件上傳到了一個臨時目錄，這個臨時目錄咱們能夠在app.js中配置的，配置方式以下：

app.use(express.bodyParser({ uploadDir:__dirname+'/public/temp' }));

這樣在文件上傳後文件就存放在/public/temp目錄下，文件名也是express經過必定的算法隨機獲取的。在咱們寫的action中只須要把存在臨時目錄中的文件移動到服務端存放文件的目錄下，而後刪除臨時目錄下的文件便可。具體代碼以下：

function uploader(req, res) { if (req.files != 'undifined') { console.dir(req.files); utils.mkDir().then(function (path) { uploadFile(req, res, path, 0); }); } } function uploadFile(req, res, path, index) { var tempPath = req.files.file[index].path; var name = req.files.file[index].name; if (tempPath) { var rename = promise.denodeify(fs.rename); rename(tempPath, path + name).then(function () { var unlink = promise.denodeify(fs.unlink); unlink(tempPath); }).then(function () { if (index == req.files.file.length - 1) { var res = { code: 1, des: '上傳成功' }; res.send(res); } else { uploadFile(req, res, path, index + 1); } }); } }

二、實現效果

 

4、獲取代碼

 代碼下載地址：https://github.com/wangyan9110/FileUploader

----轉載請註明出處http://www.cnblogs.com/JerryWang1991/ 謝謝！