マルチファイルのドラッグアンドドロップアップロードを実装する単純なノードプロジェクトは、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> <スクリプト> <src = "js/eventutil.js"> </script> <title> upload> <stly ＃aaaaaa; Text-align：center; line-height：100px; color：rgba（81、49、202、0.72）;マージン：150px auto;} </style> </head> <body> <div = "a1">これにドラッグ</div> <div div> varement " handerEvent（event）{var info = ""、output = document.getElementById（ "outinput"）、files、i、len; eventutil.preventdefault（event）; //ブロッキングイベントのデフォルト動作var formdata = new formdata（）; if（event.type == "drop"）{files = event.datatransfer.files; i = 0; len = files.length; +"bytes）<br/>"; formdata.append（ "file"+i、files [i]）; i ++;} innerhtml = info; $。ajax（{type： "post"、url： "/uploadfile"、data：data：formdata、async：fals cach：fals、fals、fals、fals、fals、fals、fals、fals、fals、fals、fals、fals、fals fals fals fals fals fals fals fals fals fals fals、データの成功のアップロードのデフォルトの文字列：function（rs）{console.log（rs）;}、error：function（r）{alert（ "a file upload error！"）;}}）;}} event.addhandler（a1、 "dragover"、handerEvent）; 「ドロップ」、handleEvent）; </script> </body> </html>HTMLコンテンツは非常にシンプルで、許可されたドラッグ範囲を表示し、アップロードされたファイルのコンテンツを表示するために使用されます。
JSパート：
ここでは、Eventutil Interfaceオブジェクトを準備しました。これは、イベントを処理するための小さなライブラリと見なすこともできます。その機能は、各ブラウザで同じイベントをバインドするために異なる方法をカプセル化することです。各ブラウザの一般的なイベント結合方法を実装するために、eventutilオブジェクトを使用して均一に実装されます。実装コードを単純に見ることができますが、これは非常に簡単です。
ブラウザがドラッグの3つのイベント、「ドラゴ」、「ドラッグオーバー」、「ドラッグ」のデフォルト動作を検出すると、「ドラッグ」の状況が「ドラッグ」であるときにカスタムイベントが実行されます。
ファイルをアップロードするため、FormDataインスタンスをここで使用します。 append（）を介してオブジェクトにファイルを追加して、キューファイルになります。サーバーにアップロードした後、キュー順に属性オブジェクトに解析されます。イベントでは、イベントに保存されているファイルは、「event.datatransfer.files」を通じて取得されます。
ここで注意すべきもう1つのことは、jQueryのAjaxメソッドがファイルオブジェクトをアップロードするときにProcessDataをfalseに設定する必要があることです。これは、デフォルトの読み取り文字列操作を使用しないことを意味します。その理由は、デフォルトでは、データオプションを介して渡されたデータがオブジェクト（技術的に言えば、文字列ではない限り）である場合、デフォルトのコンテンツタイプ「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（）; //すべての環境アプリ'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（）; // file upload upload（ 'development' == app.get（ 'env'））{app.use（express.errorhandler（））;} app.get（ '/users'、 '/user'、 user.list）; http.createServer（app）.listen（app.get（ 'port'）、function（）{console.log（ 'express server ristening on port' + app.get（ 'port'）;}）;初期app.jsからいくつかの違いがあります。 APPオブジェクトをfileupload.jsで再利用するようにエクスポートし、Fileupload.jsモジュールを導入し、このインターフェイスオブジェクトを介してモジュールのすべてのメソッドを保存し、uploadFileメソッドと呼ばれるアップロードテストオブジェクトを取得しました。
わかりました、最後にfileupload.jsファイルを見てみましょう。
var multipart = require（ 'connect-multiparty'）; var app = require（ "../ app"）; var path = refight（ 'path'）; var app = app.app; var uploadtest = {}; function uploadfile（）{app.post（ "/uploadfile"、lumipart（req）、multipart（） null）{if（req.files ["file"+i]）upload（i）; else {i = null; path.basename（req.files ["file" + index] .path）; //パスインターフェイスは、ファイルのパスとファイル名を指定できます。 fs.CreaterEadStream（req.files ["file"+index] .path）.pipe（fs.createwriteStream（targetPath））;}}）;} uploadTest.uploadfile = uploadfile; exports.uploadtest = uploadTest;nodejsは常に非常にシンプルで強力で、非常に創造的です。そのため、私はそれが好きです。ここには、実際に重要なコードがほとんどないことがわかります。ファイルのアップロードを実装する論理プロセスを簡単に紹介します。
•アップロードされたファイルのファイル名を取得します
•ファイルストレージの場所とファイル名を設定します
•ファイルのコンテンツストリームを読み、コンテンツストリームを書き込む新しいファイルを作成します
複数のファイルをアップロードするために、私はいくつかのマッチング操作も行いました。これは非常に直感的で理解するのが難しくありません。
ファイルが正常にアップロードされた後、パブリックファイルの下にuploadfilesファイルの下に表示されます。
ファイルで使用されるモジュールは、package.jsonに記録されます。 Package.jsonの同時レベルのディレクトリアドレスを入力することにより、コマンド「NPMインストール」を介してインストールできます。 GitHubで直接ダウンロードしたプロジェクトファイルを実行すると、もはやインストールする必要はありません。
上記は、nodejsとhtml5を組み合わせて複数のファイルをサーバーにアップロードする実装方法です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！