1。序文
ファイルアップロードは比較的一般的な関数です。アップロードの従来の方法はより厄介です。最初にアップロードボタンをクリックしてから、ファイルへのパスを見つけてからアップロードする必要があります。ユーザーエクスペリエンスに大きな問題をもたらします。 HTML5は、アップロードに必要なAPIのドラッグアンドドロップをサポートし始めます。 NodeJSは、最近ますます人気が高まっている技術でもあります。また、Nodejsに参加するのはこれが初めてです。 NodeJS開発では、最も一般的に使用される開発フレームワークの1つはExpessです。これはMVCパターンと同様のフレームワークです。 HTML5とNodeJS Expressと組み合わせて、ドラッグアンドドロップアップロードの機能が実現します。
2。基本的な知識の普及
1。nodejsの基本的な知識
簡単に言えば、nodejsはJSがサーバー側で実行できるようにする開発プラットフォームです。 Nodejsは非常に速く開発しており、Taobaoなどの多くの国内企業もそれを使用し始めています。従来のWebアプリケーション開発プラットフォームは、マルチスレッドに依存して、高い電流リクエスト応答を実現しています。 NodeJSは、単一スレッドの非同期IO、およびイベント駆動型の設計モデルを採用しており、NodeJSに大規模なパフォーマンスの改善をもたらします。これは、nodejsの最大の機能でもあります。 nodejsでは、すべてのIO操作がコールバックを通じて実行されます。 nodeJSがIO操作を実行すると、IOリクエストをイベントキューにプッシュし、プログラムが処理するのを待ち、次にコールバック関数を呼び出して結果を返します。
たとえば、データベースを照会する場合、操作は次のとおりです。
mysql.query（ "select * from mytable"、function（res）{callback（res）;}）;上記のコードでは、nodeJSが上記のステートメントを実行すると、データベースが結果を返すのを待つことはありませんが、以下のステートメントを実行し続けます。データベースがデータを取得すると、イベントループキューに送信されます。コールバックのものは、スレッドがイベントループキューに入る後にのみ実行されます。
Nodejsについて2日間もっと読んでいますが、あまり知りません。詳細については、インターネットで検索できます。
nodejs http://www.nodebeginner.org/index-zh-cn.html //www.vevb.com/article/48755.htm
2。Expressの基本的な知識
NodeJSは、多数のサードパーティ開発ライブラリを備えた比較的アクティブなオープンソースコミュニティであり、その中にExpressは最も広範で最も一般的に使用されるフレームワークの1つです。また、Nodejsが推奨する公式フレームワークでもあります。一般的なHTTP操作のカプセル化に加えて、ルーティングコントロール、テンプレート解像度サポート、動的試行、ユーザーの返信なども実装していますが、全能のフレームワークでもありません。関数のほとんどはHTTPのカプセル化であり、それは単なる軽量のフレームワークです。また、多くの機能をサードパーティライブラリに統合して実装する必要があります。
Exressは、非常に便利なアップロード機能をサポートします。ファイルのアップロード要求の後、Expressはファイルを受信し、ファイルを一時ディレクトリに保存します。次に、ルーティング方法では、ファイルを一時ディレクトリからフォルダーにコピーするだけで、ユーザーのアップロードを保存する必要があります。ファイルのアップロードパーツでは、サーバー側の実装はExpress関数に基づいています。
3。HTML5ドラッグアンドアップロードAPI
HTML5は多くの新機能を提供し、ドラッグイベントとファイルアップロードは新機能の1つです。スペースが限られているため、ドラッグアップアップロードコードの実装が後で強調表示されます。 HTML5から提供されたドラッグアップロードされたAPIは、1つずつリストしません。興味がある場合は、http：//w3school.com.cn/html5/html5_ref_eventattributes.asp#mouse_events //www.vevb.com/html5/85977.htmlを参照してください
3。ドラッグしてアップロードして達成します
1。コード実装
まず、フロントエンドJSのファイルディレクトリを見てみましょう。
で：
uploader.jsは、主にHTML5でサポートされているアップロード関数のカプセル化を実装しています。
uploaderqueue.jsは、主にファイルキューとファイルアップロードオブジェクトのアップロードの管理を実装し、ファイルキューにファイルをサーバーにアップロードします。
uploaderApp.jsファイルアップロードのメインエントランスは、主にアップロードウィンドウを実装してドラッグイベントを聞き、ドラッグされたファイルをアップロードファイルキューに押し込み、ファイルアップロードプログラムを開始します。
以下は、コアコードの簡単な説明です（必要）。すべてのコードはここからダウンロードできます：fileuploader
まず、html5が提供するファイルをアップロードするためのuploader.jsを単にカプセル化する
function uploader（url、data、files）{this._files = files; this._data = data; this._url = url; this._xhr = null; this.onloadstart = {}; this.onloadEnd = {}; this.onprogress = {}; this.onerror = {}; this.ontimeout = {}; this.callback = {}; //リクエストが完了した後のコールバック_self = this; } uploader.prototype = {init：function（）{if（！isvalid（））{throw e; } this._xhr = new xmlhttprequest（）; this._bindevents（）; }、send：function（）{if（this._xhr == null）{this.init（）; } var formdata = this._createformdata（）; this._xhr.open（ 'post'、this._url、true）; this._xhr.send（formdata）; }、_bindevents：function（）{_ self = this; this._xhr.upload.loadstart = function（e）{evalfunction（_self.onloadstart、e）; } this._xhr.upload.onload = function（e）{evalfunction（_self.onload、e）; }; this._xhr.upload.onloadend = function（e）{evalfunction（_self.onloadend、e）; } this._xhr.upload.onprogress = function（e）{evalfunction（_self.onprogress、e）; }; this._xhr.upload.onerror = function（e）{evalfunction（_ self.onerror、e）; }; this._xhr.upload.ontimeout = function（e）{evalfunction（_self.ontimeout、e）; } this._xhr.Onreadystatechange = function（）{if（_self._xhr.readystate == 4）{if（typeof _ self.callback === 'function'）{var status = _ self._xhr.status; var data = _ self._xhr.responsetext; _self.callback（ステータス、データ）; }}}}}、_createformdata：function（）{var formdata = new formdata（）; this._adddatatoformdata（formdata）; this._addfiletoformdata（formdata）; formdataを返します。 }、_adddatatoformdata：function（formdata）{if（this._data）{for（this._data）{formdata.append（item、this._data [item]）; }}}、_addfiletoformdata：function（formdata）{if（this._files）{for（var i = 0; i <this._files.length; i ++）{var file = this._files [i]; formdata.append（ 'file [' + i + ']'、this._files [i]）; }}}}}}; codevar 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（）; Insuploaderを返します。 }};アップローダーオブジェクトは、主にHTML5によって提供されるネイティブAPIを単純にカプセル化します。 uploaderFactoryは、jQueryのajaxメソッド、ファイルアップロードコールのように実行できるシンプルなインターフェイスを提供します。 HTML5で提供されるファイルアップロードのサポートは、元のXMLHTTPREQUESTに基づいていくつかのプロパティとメソッドを拡張し、ファイルアップロード操作をサポートするFormDataオブジェクトを提供することです。
ファイルアップロードキュー（uploaderqueue.js）も比較的重要なオブジェクトです。 2つのオブジェクトが含まれています。1つはキュー、ファイルキューオブジェクトです。これは、ファイルキューの追加、削除、変更、クエリの管理を主に担当します。他のオブジェクトは、ファイルアップロードエンジンであるuploadEngineです。その機能は、主にファイルキューからファイルオブジェクトを取り出し、アップロードオブジェクトを呼び出してファイルをアップロードし、ファイルキューのファイルステータスを更新する責任があります。キューとアップロードエンギンはシングルトンオブジェクトです。
まず、ファイルキューオブジェクトを見てみましょう。
（function（upladerqueue）{var status = {ready：0、uploading：1、complete：2} var _self = null; var instance = null; function queue（）{this._datas = []; this._cursize = 0; // current length_self = this;} que.protototototototye = {get：big new（） _datas.push（key、data、status.ready}）; {this._getingbykey（key）; this._getindexbykey（key）; if（index！= -1）{datas [index] .status = status; }} return -1; }、getDatabyIndex：function（index）{if（index <0）{return null; } this._datas [index]; }、_getIndexbyKey：function（key）{for（var i = 0; i <this._datas.length; i ++）{if（this._datas [i] .key == key）{return i; }} return -1; }};関数getInStace（）{if（instance === null）{instance = new Queue（）;インスタンスを返す; } else {return instance; }} upladerqueue.queue = getInstance（）; upladerqueue.uploadstatus = status;}）（window.uploaderqueue）;アップロードファイルキューは、配列を使用して各ファイルオブジェクトの情報を管理します。各ファイルオブジェクトには、キー、データ、ステータスの3つの属性があります。このオブジェクトは、ファイルオブジェクトの追加、削除、更新、および検索の関数を主に担当します。
アップロードファイルキューのもう1つのより重要なオブジェクトは、アップロードエンジンオブジェクト（uploadEngine.js）です
（function（upladerqueue）{var instance = null; var _ self; function uploadEngine（）{this._url = null; this._curuploadingkey = -1; // flags this.uploadstatusched = {}; thisuploaditemprogress = {upputepe seturl：function（url）{this._url = url; if (index != -1) { this._uploadItem(index); } else { this._curUploadingKey = -1; return null; } }, _uploadItem: function (index) { var data = upladerQueue.Queue.getDataByIndex(index).data; _self = this; this._readyUploadItem(index); var upload = uploaderfactory.send（this._url、data.files、function（status、data）{_self._completeduploaditem.call（_ self、status、data）;} _self.uploaditemprogress（_ self._curuploadingkey、e）; }}、_ readyuploaditem：function（index）{this._curuploadingkey = upladerqueue.quur.getDatabyIndex（index）.Key; if（typeof this.uploadstatuschanged === 'function'）{this.uploadstatuschanged（this._curuploadingkey、upladerqueue.uploadstatus.uploading）; } upladerqueue.queue.setItemstatus（this._curuploadingkey、upladerqueue.uploadstatus.uploading）; }、_completeduploaditem：function（status、data）{if（typeof this.uploadstatuschanged === 'function'）{this.uploadstatuschanged（this._curuploadingkey、upladerque.uploadstatus.complete）; } upladerqueue.queue.setItemstatus（this._curuploadingkey、upladerqueue.uploadstatus.complete）; this._startupload（）; }};関数getInStace（）{if（instance === null）{instance = new uploadEngine（）; } returnインスタンス; } upladerQueue.Engine = getInStace（）;}）（window.uploaderqueue）;このオブジェクトは比較的シンプルで、主にRunおよびSeturlメソッドを提供します。これは、アップロードエンジンを起動してアップロードパスを設定するために使用されます。再帰方法は、ファイルキュー内のすべてのメソッドをサーバーにアップロードするために内部的に使用されます。 UploadItemProgressを使用して外部アップロードの進捗状況を通知し、UploadStatUsChangedを使用してファイルアップロードステータスを通知してUIを更新します。
uploaderApp.jsには主に3つのオブジェクトが含まれています。1つはjQueryと同様の単純なjQueryオブジェクト（APP $）です。主にバインディングイベントに使用されます。 1つはuploaderareaオブジェクトで、ドラッグおよびアップロードされた窓領域で、もう1つはエントランスオブジェクトであるuploadermainオブジェクトです。主にオブジェクトを初期化するために使用され、オブジェクト全体を初期化するために外側にinitメソッドを提供します。
アプリ$およびuploaderareaオブジェクトに関するコードについては、ソースコードをダウンロードしてください。以下は、uploadermainオブジェクトの簡単な説明にすぎません。
（function（app）{var _ self; function uploadermain（id）{this._id = id; this._area = null; this.uploaders = []; this._url = 'file/uploader';} prototype = {init：init：init（）{_ _ self = this; this_initerea（）; _initqueueeng：function（）{uploaderqueue.seturl（this._url）; uploaderqueue.uploadstatus.complete）{_ self._area.completeItem（key）; Math.round（進行状況 * 100）}} function（）{this._id）; returnキー; }}}; 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に完全にカプセル化されているとすでに述べています。アクションにルーティングすると、ファイルが一時的なディレクトリにアップロードされた場合にのみ、ファイルがアップロードされます。 app.jsでこの一時ディレクトリを構成できます。構成方法は次のとおりです。
app.use（express.bodyParser（{uploaddir：__ dirname+'/public/temp'}））;このようにして、ファイルがアップロードされた後、ファイルは /public /tempディレクトリに保存され、ファイル名は特定のアルゴリズムを介してExpressによってランダムに取得されます。私たちが書くアクションでは、ファイルがサーバーに保存されているディレクトリに一時ディレクトリ内のファイルを移動し、一時ディレクトリ内のファイルを削除するだけです。特定のコードは次のとおりです。
function uploader（req、res）{if（req.files！= 'undifened'）{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 lonink = promise.denodeify（fs.unlink）; linnink（temppath）;}）。 uploadfile（req、res、path、index + 1）; }}2。効果を実現します
4.コードを取得します
コードダウンロードアドレス：//www.vevb.com/jiaoben/202117.html