以前に書かれた:
過去数日間、私はWebuploaderファイルのアップロードを研究しました。以前のブログでは、Webuploaderを使用してファイルを単純にアップロードする例を記録しています。今日は、フラグメントとブレークポイントのアップロードの例も記録します。ブログパークでは、いくつかの情報も表示しました。基本的に、データのバックエンド処理はサーブレットまたはSpringMVCです。最近のプロジェクトは常にStruts2であるため、Struts2のアクションを使用してデータを処理して、ファイルをバラバラにアップロードする効果を実現します。
1.シャードのアップロードとは何ですか?
名前が示すように、それはファイルを断片に分割すること、つまりファイルをいくつかの小さなファイルに分割してからアップロードすることを意味します。これの利点は、大きなファイルのアップロードを容易にすることです。
2。シャードアップロードの一般的なアイデア:
1.フロントデスクページで、ファイルを選択し、ボタンをクリックしてアップロードします。
2。Webuploaderアップロードされたファイルを指定された番号に分割し、サーバーバックエンドに1つずつ送信します。
3.サーバーは分割された小さなファイルを受信し、それらを一時的なフォルダーに保存します。
4。サーバーが分割された小さなファイルを受信した後、フォアグラウンドページはアップロード成功機能を実行します。
5.成功した機能をアップロードして、サーバーにリクエストを送信し、小さなファイルをファイル全体にマージするリクエストを要求します。
6.サーバーの背景はファイルをマージし、マージが完了した後に小さなファイルを保存する一時ファイルを削除します。
シャードアップロードの一般的なプロセスを理解したら、直接デモにアクセスしてください。
フロントデスクページ:
<%@ page contentType = "text/html; charset = utf-8"言語= "java"%> <%string scheme = request.getscheme();文字列servername = request.getServername();文字列contextpath = request.getContextPath(); int port = request.getServerport(); //ウェブサイトアクセスとパス文字列baseurl = scheme + "://" + servername + ":" + port + contextpath; request.setattribute( "baseurl"、baseurl);%> <html> <head> <title>断片化されたファイルをアップロードする簡単な例</title> <% - cssスタイルの紹介-%> <link href = "$ {baseurl}/webuploader0.1.5/webuploader.cs" " rel = "styleSheet" type = "text/css"/> <script src = "$ {baseurl}/ligerui2/jquery/jquery-1.9.0.min.js" type = "text/javascript"> </script> <% - ファイルアップロードプラグインの紹介- src = "$ {baseurl} /webuploader0.1.5/webuploader.min.js"> </script> <script = "text/javascript"> $(function(){/* uploaderの作成のために、dom要素が作成されます。したがって、それは簡単に無視できます。したがって、$(function(){}を作成します。 「ファイル」は、「ファイル」をアップロードします。キーは、サプロードの数を同時に制限しない場合、例えば、ゼロによると、最初のスライスが最初になりますが、3番目のスライスになります。したがって、再編成されるのは、1つのスレッドに設定されています。 false、formdata:{guid:math.random()は、fals. // uploader.on( 'filequeued'、function(file){// reselect "filelist");プロジェクトの要件に応じて、$ $を記録しますファイルアップロード中のリアルタイム。 {// console.log( 'upload success .../n')(uploader.options.formdata.guid); Math.ceil(5 * 1024 * 1024)、file.name}、{})このイベントは、成功または失敗に関係なく呼び出されます$( "#btncancel")。クリック(//ロジスティック処理..}); id = "btncancel">キャンセル</button> </div> </div> </body> </html>バックエンドアクション:
/** *説明:com.ims.action *著者:11日日付:2017/12/26 10:50 */@controller( "fileAction")パブリッククラスのfileAction {/ *セグメンテーションリクエストを受信するために使用される各小さなファイルの関連パラメーター */// //ファイル名プライベート文字列uploadFileName; //アップロードプライベート文字列uploadContentType; /** *次の変数は公開されており、パラメーターが多すぎるため、プライベートに設定してからGet and Set Methodを作成したくありません。 public string guid; //マージとスプリットは、両方ともマージリクエストの受信および送信に使用されますパブリックストリングファイル名。 //ファイル名パブリック文字列チャンク。 //セグメント番号//シェードにファイルをアップロードするとき、このメソッドは小さなファイルがアップロードされるたびに呼び出されます。これは通常の保存ファイルと変わりませんpublic void uploadfile2()スロー例外{string str = "d:/upload44/divide/"; //ファイル保存パス//各小さなファイルのパスを保存する文字列realpath = str + guid + "/" + chunk;ファイルtmp = new File(RealPath); fileutils.copyfile(upload、tmp); system.out.println( "upload file"+uploadFileName+"、block:"+chunk+"、size:"+(upload.length()/1024/1024)+"m"); } //ファイルマージpublic void mergefile()スロー例外{string path = "d:/upload44/merge/"; //マージフォルダーを作成しますnew file(path).mkdir(); //マージされたファイルファイルnewFile = new File(PATH + FILENAME); if(!newfile.exists()){newfile.createNewfile(); } fileoutputStream outputStream = new fileoutputStream(newFile、true); // bytに追加されたファイルを追加[] byt = new byte [10 * 1024 * 1024]; int len; FileInputStream temp = null;//Shash file for (int i = 0; i < Integer.parseInt(chunks); i++) { //"D:/upload44/divide/" + guid + "/" + i To save the path of the divided small file temp = new FileInputStream(new File("D:/upload44/divide/" + guid + "/" + i)); while((len = temp.read(byt))!= -1){system.out.println(len); outputStream.write(byt、0、len); } temp.close(); } //すべての付録書き込みが終了すると、ストリームを閉じることができますoutputStream.close(); //シャードファイル文字列path2 = "d:/upload44/divide/" + guid; fileutils.deletedirectory(new file(path2)); //ディレクトリSystem.out.println( "success!guid =" + guid + "; chunks =" + chunks + "; filename =" + filename); } public file getupload(){return upload; } public void setupload(file upload){this.upload = upload; } public string getuploadfileName(){return uploadFileName; } public void setuploadfileName(String uploadFileName){this.uploadfileName = uploadFileName; } public string getuploadContentType(){return uploadContentType; } public void setuploadContentType(String uploadContentType){this.uploadContentType = uploadContentType; }}struts.xml構成:
<アクションname = "uploadfile2" method = "uploadfile2"> </action> <action name = "mergefile" method = "mergefile"> </action>
OK、ここで、簡単なファイルフラグメンテーションブレークポイントのアップロードが完了しました。
ちなみに、背景はいくつかの単純なパラメーターのみを受信し、もちろん、フロントエンドのWebuploaderから渡された上記のパラメーター以上のものがあります。したがって、F12デバッグモードを使用して、送信されたリクエストと関連するリクエストパラメーターを表示することを学ぶことができます。ここでは話しません。
ランニングスクリーンショット:
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。