1。コースの概要
Webアプリケーションシステムの開発では、ファイルアップロード機能は非常に一般的な関数です。今日は、主にJavawebのファイルアップロード機能の関連する技術実装について話しましょう。インターネットテクノロジーの急速な発展に伴い、ウェブサイトのユーザーの経験要件はますます高くなっています。また、非同期アップロード、ドラッグアンドドロップアップロード、貼り付け、アップロード進行監視、ファイルサムネイル、大ファイルブレークポイント連続伝送など、非同期アップロード、ドラッグアンドドロップアップロード、貼り付けのアップロード、アップロード進行監視など、ファイルアップロード機能のテクノロジーには多くの革新的なポイントがあります。
このコースに必要な基本：
基本的なHTTPプロトコルコンテンツを理解します
基本的なIOストリーム操作テクノロジー
サーブレットの基本
JavaScript/JQueryテクノロジーの基本的な知識
2。ファイルアップロードの基本
ファイルのアップロードの場合、ブラウザはアップロードプロセス中にファイルをストリームの形でサーバー側に送信し、すべてのストリーミングデータがHTTPリクエストでサーバー側に運ばれます。したがって、ファイルをアップロードするときの要求されたコンテンツの形式を基本的に理解する必要があります。
ファイルアップロードページ：
<form action = "/itheimaupload/uploadservlet" method = "post" enctype = "multipart/form-data">アップロードされたファイルを選択してください：<入力タイプ= "ファイル" name = "添付"/> <br/>
HTTPリクエストコンテンツ：
3。Javaの背景は、サーブレットを使用してファイルを受信します
サーブレットを使用してアップロードされたファイルの入力ストリームを取得してから、リクエストパラメーターを解析する場合は面倒です。したがって、一般的に言えば、背景は、ApacheのオープンソースツールであるCommon Fileuploadファイルアップロードコンポーネントを使用することを選択します。
// Javaバックグラウンドコード：Commons-FileuploadコンポーネントアップロードファイルパブリッククラスuploadServlet拡張httpservlet {public void doget（httpservletrequest request、httpservletResponse応答）Servletexception、ioexception {// 1。 Cache DiskFileItemFactory = new DiskFileItemFactory（1*1024*1024、new File（ "c：/tempfiles/"））; // 2。 ServleFileupload Object ServletFileupload Sfu = new ServletFileupload（Factory）; //ファイル名SFU.SETHEADERENCODING（ "UTF-8"）; // 3の中国の問題を解決するResolve {list <fileItem> list = sfu.parserequest（request）; //すべてのコンテンツを解決するif（list！= null）{for（fileitem item：list）{//通常のフォームパラメーターであるかどうかを判断します（//通常のフォームパラメーター// get string属性の属性属性属性属性属性） value = item.getString（ "utf-8"）; } else {// file if（item.getName（）！= null &&！item.getName（）。equals（ ""））{//サーバーに保存しますhard disk fileutils.copyinputstreamtofile（item.getInputStream（）、new file（ "c：/targetfiles/"+item.getname（）; delete（）; delete（）; delete（）; （fileuploadexception e）{e.printstacktrace（）;}} public void dopost（httpservletrequest request、httpservletResponse応答）servletexception、ioexception {doget（request、response）;}}}4. Webuploaderを使用してコンポーネントをアップロードします
ファイルアップロードページのフロントエンドでは、BaiduのオープンソースコンポーネントWebuploaderなど、より便利なアップロードコンポーネントを使用することを選択できます。このコンポーネントは、基本的に、非同期アップロード、ドラッグアンドドロップアップロード、貼り付け、アップロードのアップロード監視、ファイルサムネイル、さらには大きなファイルブレークポイント、さらには数秒で大きなファイル送信など、ファイルアップロードの毎日の機能を満たすことができます。
Webuploadコンポーネントをダウンロードします
http://fex.baidu.com/webuploader/ webupload公式ウェブサイトでWebuploadパッケージをダウンロード
webuploadディレクトリ構造：
基本的なファイルアップロードデモ（アップロード進行を含む）
フロントエンド
1.1ページに必要なCSS、JSをインポートします
<link rel = "styleSheet" type = "text/css" href = "$ {pagecontext.request.contextpath} /css/webuploader.css"> <script = "text/javascript" src = "$ {pagecontext.request.request.request.request.request.request.request.Request. } /js/jquery-10.2.min.js "> </script> <script =" text/javascript "src =" $ {pagecontext.request.contextpath} /js/webuploader.js "> </scrip>1.2アップロードページタグを書き込みます
<！ - upload div-> <div id = "uploader"> <！ - ファイルリスト情報を表示 - > <ul id = "filelist"> </ul> <！ - > <div id = "filepicker"> [filepicker]をクリックして</div> </div>
1.3 Webuploadコードの書き込み
<script type = "text/javascript"> // 1。 Webuploadの初期化とグローバルパラメーターの構成var uploader = webuploader.create（{// flashkコントロールアドレスswf： "$ {pagecontext.contextpath} /js/uploader.swf"、//バックエンドサブミッションアドレスサーバー： "$ {$ {pageStext.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.コントロールのタグピック： "#filepicker"、// auto upload file auto：true、}）; // 2。ファイルを選択した後、ファイル情報キューディスプレイ//ファイルの登録イベント：ファイルがキューに追加されたときにトリガー//ファイル：現在選択されているファイルuploader.on（filequeued "、function（file）{// file情報div $（"＃filelist "）。 class = 'fileinfo'> <span> "+file.name+" </span> <div class = 'state'> upload ... </div> <span class = 'text'> </span> </div> "）;}）; // 3。 Regist Registing Progressリスニング//ファイル：ファイルのアップロード//パーセンテージ：現在の進行状況の割合。最大値は1です。たとえば、0.2uploader.on（ "uploadProgress"、function（file、percentage）{var id = $（ "＃"+file.id）; //ステータス情報情報id.find（ "div.state"）。 id.find（ "span.text"）。text（math.round（percentage*100）+"％"）;}）; // 4。登録およびアップロードリスニング//ファイル：ファイルをアップロードします//応答：バックグラウンドで返されたデータ、return uploader.on（ "uploadsuccess"、function（file、response）{// upprod status information $（ "＃"+file.id）.find（ "div.state"）。2）バックエンドサーブレットコード
DiskFileItemFactory = new DiskFileItemFactory（）; servletfileupload sfu = new servletfileupload（factory）; sfu.setheaderencoding（ "utf-8"）; try {list <fileitem> items = sfu.parserequest（request）;項目：item）{if（item.isformfield（））{//通常の情報} else {//ファイル情報//ファイルのみを保存および処理する必要があると判断します。 file（serverPath+"/"+item.getName（）））; system.out.println（ "ファイルが正常に保存されます"）;}}} catch（fileuploadexception e）{e.printstacktrace（）;}画像サムネイルを生成します
キーポイント：uploader.makethumb（）メソッドを呼び出して、サムネイルを生成します
uploader.on（ "filequeued"、function（file）{// file情報div $（ "＃filelist"）。画像サムネイル：makethumb（）method // call makethumb（）メソッド//エラー：サムネイルの作成に失敗しましたプレビュー "）;} //成功した場合、サムネイルは指定された位置id.find（" img "）。attr（" src "、src）;}）;}）;}）;ドラッグ、貼り付け、アップロード
1）ページ上のドラッグ領域にdivを追加する
<！ - upload div-> <div id = "uploader"> <！ - ファイルドラッグ領域 - > <div id = "dndarea"> <p>ここでファイルを直接ドラッグして自動的にアップロードします</p> </div> <！ - ディスプレイリスト情報 - > <ul id = "filelist"> </ul> <
2）Webuploaderのグローバル構成パラメーターにドラッグアンドドロップパラメーターを追加する
// 1。 Webuploadの初期化とグローバルパラメーターの構成var uploader = webuploader.create（{// flashkコントロールアドレスswf： "$ {pagecontext.contextpath} /js/uploader.swf"、//バックエンドサブミッションアドレスサーバー： "$ {$ {pageStext.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.コントロールのタグピック： "＃filepicker"、// auto upload file auto：true、//ドラッグアンドドロップ機能を有効にし、ドラッグエリアDNDを指定します。大きなファイルをチャンクにアップロードします
1）Webuploaderのグローバルパラメーターにブロックアップロードパラメーターを追加します
// 1。 Webuploadの初期化とグローバルパラメーターの構成var uploader = webuploader.create（{// flashkコントロールアドレスswf： "$ {pagecontext.contextpath} /js/uploader.swf"、//バックエンドサブミッションアドレスサーバー： "$ {$ {pageStext.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.context.コントロールのタグピック： "＃filepicker"、// auto upload file auto：true、//ドラッグアンドドロップ機能を有効にし、DND： "＃dndarea"を指定します。チャンク：true、//ブロックあたりのファイルサイズ（デフォルト5m）chunksize：5*1024*1024、//いくつかの同時スレッド（デフォルト3）スレッドを開きます：3、//2）ファイルをアップロードするために3つの時点を監視します
上記の3つの構成を追加した後、ファイルが5mを超えると、Webuploaderが自動的にファイルを背景に送信することがわかります。
各ブロックリクエストには情報が含まれています。
チャンクのファイルアップロードで3つの重要な時点を聞くことができます。
前からのファイル：BEAR-SEND BEAR-SEND BEAR-SEND：ブロックがある場合は、各ブロックが送信される前にAfter-SENDファイルを呼び出します。すべてのブロックが送信された後に呼び出されます// 5。ファイルのアップロードの3つの時点を監視します（注：コードのこのセクションはwebuploader.createの前に配置する必要があります）ブレークポイントの連続伝送の場合）//ステップ3：すべてのチャンクが正常にアップロードされます（1。チャンクファイルの背景にマージするように通知）すべてのチャンクをアップロードする前に、function（）{// 1を計算します。背景が現在のブロックを保存したかどうかを要求します。存在する場合は、ブロックファイルをスキップしてブレークポイントの連続透過機能を実現します}、//ステップ3：すべてのブロックが正常にアップロードされた後、この関数を呼び出します：function（）{// 1。ブロックにアップロードされている場合、すべてのブロックファイルはバックグラウンドからマージされます}}）;前のファイルロジック：
// md5file（）メソッドを使用してファイルの一意のタグを計算しますブレークポイントの連続伝送と2番目の伝送に使用されるファイルの一意のタグ（new webuploader.uploader（））。Md5file（ファイル、0,5*1024*1024）.progress（function（perperentage）{$（ "＃"+file.id）.find（ "div.state"）。取得... "）;}）背景がファイルを保存したかどうかを要求します。存在する場合、ファイルはスキップされて2番目のパス関数// return deferred.promise（）;}以前のロジック：
//現在のファイルの一意のタグを背景に送信します。これは、チャンクされたファイルを保存するディレクトリを作成するために使用されます。
3）背景は、すべてのチャンクされたファイルを保存する必要があります
//各ファイルのディレクトリを作成し、このファイルのすべてのチャンクされたファイルを保存しますif（！chunksdir.exists（））{chunksdir.mkdir（）;} if（chunk！= null）{// chunkfile chunkfile = new file（chunksdir.getPath（）+"/"+chunk）; fileutils.copyinputStreamtofile（アイテム。4）フロントデスクは、すべてのチャンクされたファイルをマージするためにバックエンドに通知します
//フロントデスクは、ファイルをマージする背景に通知しますafter-send-fileロジック：aftersendfile：function（file）{// 1。チャンクにアップロードされた場合、バックグラウンドを介してすべてのチャンクファイルをマージします//背景を要求してファイル$ .ajax（{type： "post"、url： "" $ {pagecontext.request.contextpath}/uploadcheckservlet？action = mergechunks "、data：{// unique gilemd5：filemd5：filemd5：filemd5：wilemd5、////// fileName：file.name}、datAtype： "json"、success：function（response）{alert（response.msg）;}}）;} //すべてのチャンクファイルをマージするif（ "mergechunks"。 request.getParameter（ "filemd5"）; string filename = request.getParameter（ "filename"）; //ディレクトリファイルのすべてのファイルを読み取りますf = new file（serverpath+"/"+filemd5）; filearay = f.listfiles（new filefilter（）{// exclude Directory、file pation（// exclude Directory） {if（pathname.isdirectory（））{return false;} return true;}}）; //ソートリストを容易にするためにコレクションに変換<file> filelist = new arraylist <file>（arrays.aslist（filearray））; {if（integer.parseint（o1.getname（）））<integer.parseint（o2.getname（））{return -1;} return 1;}}）; file outputfile = new file（serverpath+"/"+filename）; fileoutputStream（outputFile）.getChannel（）; // Merge FileChannel Inchannel; for（file：filelist）{inchannel = new fileinputStream（file）.getChannel（）; inchannel.transferto（0、inchannel.size（）、outchannel.close（）; // deleteシャードfile.delete（）;} if（tempfile.isdirectory（）&& tempfile.exists（））{tempfile.delete（）;} //ストリームを閉じるoutchannel.close（）; response.setContentType（ "text/html; charset = utf-8"）; response.getwriter（）正常に/"}"）;}大きなファイルブレークポイントが続きます
ブロックアップロードの実装に基づいて、BreakPointの連続伝送を実装するのは非常に簡単です！ ！ ！
フロントエンド：
//時点2：ブロックアップロードがある場合、この関数は各ブロックアップロードの前に呼び出されます//ブロック：現在のブロックオブジェクトを表します。背景が現在のブロックを保存したかどうかを要求します。存在する場合は、ブロックファイルをスキップして、ブレークポイントの連続伝送関数var Deferred = webuploader.deferred（）; //背景がファイル情報を保存するかどうかを要求します。保存されている場合、スキップされます。そうでない場合、チャンクコンテンツは$ .ajax（{type： "post"、url： "$ {pagecontext.request.contextpath}/uploadcheckservlet？action = checkchunk"、data：{//ファイルユニークなマークfileemd5：filemd5、//現在lock.end-block.start}、datAtype： "json"、success：function（response）{if（respons.ifexist）{//ブロックが存在し、ブロックdeferred.Reject（）;背景ファイルを保存するディレクトリを作成します。 }、舞台裏：
//チャンクが存在するか、プライベートボイドチェックチャンク（httpservletrequestリクエスト、httpservletresponse応答）を保存するかを確認します。 request.getParameter（ "chunksize"）; file checkfile = new file（serverpath+"/"+filemd5+"/"+chunk）; respons.setContentType（ "text/html; charset = utf-8"）; //ファイルが存在するかどうかを確認checkfile.length（）== integer.parseint（chunksize））{response.getWriter（）。write（ "{/" ifexist/"：1}"）;} els {ressons.getWriter（）。write（ "{/" ifexist/"：0}"）;}}}数秒でファイル転送
すべてのブロック要求の前に、2番目の転送関数を実装できます！ ！ ！
フロントエンド：
beforesendfile：function（file）{// defferedvar deferred = webuploader.deferred（）; // 1を作成します。ブレークポイントの連続伝送と2番目の伝送に使用されるファイルの一意のマークを計算します（new webuploader.uploader（））。md5file（file、0,5*1024*1024）.progress（function（perperentage）{$（ "＃"+file.id）.find（ "div.state"）。 val; $（ "＃"+file.id）.find（ "div.state"）。 $ .ajax（{type： "post"、url： "$ {pagecontext.request.contextpath}/uploadcheckservlet？action = filecheck"、data：{//ファイルの一意のタグfilemd5：filemd5}、dataType： "json"、success：function（response）{if（respons.filexist）{$（ "＃"+file.id）。 Deferred.Resolve（）;}}}）;}舞台裏：
//ファイルのMD5データがデータベースプライベートボイドFileCheck（httpservletrequestリクエスト、httpservletresponse応答）に関連しているかどうかを確認します。 Hashmap <String、String>（）; database.put（ "576018603F4091782B68B78AF85704A1"、 "01。COURSE Review.Itcast "）; respons.setContentType（" text/html; charset = utf-8 "）; if（database.containskey（filemd5））{respons.getWriter（）。write（" {/"ifexist/"：1} "）;上記は、編集者が紹介したJavawebファイルのアップロードとダウンロードの説明の例です（クールなファイルアップロードテクノロジー）。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！