1。Webuploaderプラグインを使用する理由の説明
私は今やっているプロジェクトにだまされました。
最初に私のプロジェクトアーキテクチャスプリング+struts2+mybatis+mysqlについて話させてください
それから何。 2Gに応じてアップロードするだけで十分であることが合意されたため、AjaxFileuploadプラグインを使用しました。これを以前にアップロードするためにこれを使用したため、添付ファイルをアップロードするときに直接使用しました。
さまざまなコードとコードがテストされています。 2Gファイルのアップロードに問題はありません。トリックが来ました。プロジェクトが開始された後、顧客は4Gファイルをアップロードするように依頼し、さらに20g以上がありました。 。ナニ、あなたはそれを以前に言わなかった。 。 。
IE11では、ajaxfileupload.jsプラグインを使用して、4Gを超えるファイルをアップロードし、IEは例外を直接スローします。 32ビットのポップアップを超える算術結果を含むメッセージ。
下の図に示すように：
追加のメモとして、私のシステムは64ビット、8Gメモリ、Googleブラウザー、IE11ブラウザーはすべて32ビットです。 Googleの下でAjaxFileuploadを使用して8Gをアップロードすることは問題です。エラーは報告されません。
IE11には4G以上があり、上記の写真を直接報告するのは間違っています。とんでもない。プラグインを変更します。
2。プラグインの選択
1。プラグインをアップロードします。 Streamは、さまざまなブラウザーによるファイルをアップロードする問題を解決するためのプラグインです。 UploadifyのフラッシュバージョンとHTML5の組み合わせです。プラグインアドレスhttp://www.twinkling.cn/
機能は確かに非常に強力ですが、CSSスタイルは修正されており、現在のプロジェクトの進行状況バースタイルとは大きく異なります。このプラグインをあきらめます
2.Webuploaderプラグイン。 Webuploaderは、主にHTML5であるシンプルな最新ファイルアップロードコンポーネントであり、Baidu Webfe（FEX）チームが開発したFlashによって補足されています。最新のブラウザでは、主流のIEブラウザを放棄せずにHTML5の利点に完全なプレイを行うことができ、元のフラッシュランタイムを引き続き使用し、IE6+、iOS 6+、およびAndroid 4+と互換性があります。同じコールメソッドは、ユーザーが自由に選択できます。
大きなファイルフラグメンテーションの同時アップロードを使用すると、ファイルアップロードの効率が大幅に向上します。プラグインアドレスhttp://fex.baidu.com/webuploader/
このプラグインは、CSSスタイルをカスタマイズできます。機能も非常に強力なので、このプラグインを決定的に採用しました。
3。Webuploaderシングルファイルアップロード
Webuploaderバージョン0.1.5を使用しています。 Webuploaderは、主に5mごとにシャーディングのリクエストを送信したり、バックグラウンドからファイルを受信してファイルをマージするなど、クライアント上の大きなファイルをスライスします。ファイルをマージする方法は2つあります。 1つ目は、すべてのシャードをバックグラウンドに渡してからマージすることです。これは、シャーディング順序が正しいことを確認するためであり、2番目はシャーディング中にマージすることです。プロジェクトの2番目のものを使用しました。 Web Uploaderを使用してファイルをアップロードするには、JS、CSS、およびSWFの3つのリソースが必要です。
1. JSファイルを紹介します
<script type = "text/javascript" src = "../ main/js/webuploader.js"> </script> <script type = "text/javascript" src = "../ main/js/webuploader.min.js"> </script>
2。CSSスタイルを紹介します
<link href = "../ main/css/webuploader.css" rel = "styleSheet" type = "text/css"/>
3。SWFを紹介します。 SWFはそれを直接参照しません。 Webuploaderが初期化されたときにSWFパスを指定するだけです。
4.upload3.html
< xmlns = "http://www.w3.org/1999/xhtml" xml：lang = "ja" lang = "ja"> <head> <head> <head> <head-type "content =" text/html; charset = utf-8 " /> <Meta http-equiv = "content-script-type" content = "text/javascript"/> <meta http-equiv = "content-style-type" content = "text/css"/> <title> demo </title> <link href = "../ main/css/cremre-v1.cs" "tipe =" "tike /> <link href = "../ main/css/webuploader.css" rel = "styleSheet" type = "text/css"/> <script = "text/javascript" src = "../ main/js/jquery-1.11.1.1.min.js"> </script> <script = "/javascript" " src = "../ main/js/jquery-2.1.4.min.js"> </script> <script type = "text/javascript" src = "../ main/js/jquery-ui.min.js"> </script> <script type = "text/javascript" " src = "../ main/js/bootstrap-datepicker.min.js"> </script> <script type = "text/javascript" src = "../ main/js/bootstrap-datepicker.min.js"> </script> <script = "text/javascript" "" src = "../ main/js/loces/bootstrap-datepicker.ja.min.js"> </script> <スクリプトタイプ= "src =" ../ main/js/webuploader.js "> </script> <script =" text/javascript "" " src = "../ main/js/webuploader.min.js"> </script> <script type = "text/javascript" src = "../ js/contents/upload3.js"> </scrip> id = "adcition"> </div> <入力型= "button" value = "upload" id "=" upload "/> </div> </div> <div> <div> <div> <div> <uploader1"> <！---ファイル情報を保存するために使用 - > <div = "thelist1"> </div> <div> <div> <div> <div> div id = "multi"> div div div div> "button"/"botun </div> </div> </body> </html>
写真は比較的単純です、このように見えます
5.upload3.js
単一のファイルアップロード、マルチファイルアップロード、およびWebuploaderの複数のインスタンスを含む
/*******************************************************************（function list = $（ "＃thelist"）; var uploader; // instantiated uploader;私はデバッガーを開きましたが、ファイルをカスタマイズする場合、ファイルを取得することはできません。 // 'Multifile'、//私が使用したバージョンは0.1.5であり、//名前はまだデフォルトのファイルではありません。ファイルを使用する場合、ファイルを取得できません//著者がこの場所を変更する時間を持つことをお勧めします。サーバー：「ContentsDetail！ajaxattachupload.action "、duplicate：true、//は同じファイルがsezize：false、formdata：{" status "：" file "、" contentsdto.contentsid "：" 0000004730 "、" uploadnum "：" 00004730 "、" nult ""： '：'：チャンク：true、// shash processing chunksize：5 * 1024 * 1024、//スライスあたり5m chunkretry：false、//故障しない場合、スレッドを試してみないでください：1、//同時数をアップロードします。同時に許可されているアップロードプロセスの最大数。 // runtimeorder： 'flash'、//グローバルドラッグ関数を無効にします。これは、画像がページにドラッグされたときに表示されません。画像を開きます。 disableglobaldnd：true}）; // fileが追加された場合、uploader.on（ "filequeued"、function（file）{console.log（ "filequeued："）; $ list.append（ "<div id = '" + file.id + "' class = 'item'>" <h4 class = 'info'> " + file.name +" </h4> +"</div>"）;}）; //すべてのファイルがアップロードされている場合、uploader.on（ "uploadfinished"、function（）{console.log（ "uploadfinished："）;}）//ファイルがサーバーの応答にアップロードされると、このイベントはサーバーの応答が有効かどうかを尋ねます。 uploader.on（ "uploadaccept"、function（object、ret）{//サーバーの応答//ret._rawはdatavar data = json.parse（ret._raw）; if（data.resultCode！= "1" && data.ResultCode！= "3"）{if.REART = "9 up.9" 9 "9" 9 "9" 9 "9" 9 "9" 9 "9" 9 "9" 9 "9" 9 "9"） false;}} else {// e05017uploader.reset（）; alert（ "error"）; return false;}}）//ファイルのアップロードが成功したときに無料。 uploader.on（ "uploadsuccess"、function（file）{$（ "＃"+file.id）.find（ "p.state"）。text（ "uploaded"）;}）; function（ "uploaderror"、function（file）{$（ "＃"+file.id）.find（ "p.state"）。 error "）; uploader.cancelfile（file）; uploader.removefile（file、true）; uploader.reset（）;}）; $（"＃upload "）終了をアップロード************************************* //* filesize = 0; '../../main/js/uploader.swf'、server： "contentsdetail！multiupload.action"、duplicate：true、//同じファイルをサイズとしています：false、formdata： {"status"： "multi"、 "contentsdto.contentsid"： "0000004730"、 "uploadnum"： "0000004730"、 "explfflg"： 'false'}、null、//画像は圧縮されていません。失敗し、スレッドを再試行しないでください：1、//同時数をアップロードします。同時に許可されるアップロードプロセスの最大数。 // filenumlimit：50、//ファイルの総数を確認します。それを超えると、キューに参加することは許可されません。このようにして、画像がページにドラッグされたら、画像を開きます。 disableglobaldnd：true}）; // fileが追加された場合、uploader.on（ "filequeued"、function（file）{console.log（ "filequeued："）; $ list.append（ "<div id = '" + file.id + "' class = 'item'>" <h4 class = 'info'> " + file.name +" </h4> +"</div>"）;}）; // uploaderを起動すると、uploader.on（ "startupload"、function（）{console.log（ "startupload"）; //追加のフォームパラメーター$ .extend（true、uploader.options.formdata、 {"filesize"：filesize、 "multifilename"：filename.join（ "、"）、 "filesizeonebyone.join（"、 "）}）; uploader.on（ "uploadaccept"、function（object、ret）{//サーバーの応答//ret._rawはdataConsole.logに似ています（ "uploadaccept"）; console.log（ret）; var data = json.parse（ret._raw）; if（data.ResultCode！= "1" && datultcode！= "3" 3 "3" 3 "） "9"）{alert（ "error"）; uploader.reset（）; return;}} else {uploader.reset（）; alert（ "error"）;}）uploader.on（ "uploadsuccess"、function（file）{$（ "＃"+file.id）.find（upsoload "）; "uploadError"、function（file、recose）{$（ "＃"+file.id）.find（ "p.State"）。text（ "uploaderror"）; console.log（file）; console.log（regas）; //複数ファイルvar filearray = uploader.getfiles（）; ; i <filearray.length; i ++）{uploader.cancelfile（filearray [i]）; uploader.removefile（filearray [i]、true）;} uploader.reset（）; filename = 0; filename = []; filesizeonebyone = [];}; uploader.on（ "error"、function（）{console.log（ "error"）; uploader.reset（）; filenize = 0; filename = []; filesizeonebyone = []; alert（ "エラー"）;}） file/* $（ "＃multi .webuploader-pick"））。クリック（function（）{uploader.reset（）; filesize = 0; filename = []; filesizeonebyone = []; $（ "＃multi：file"）。 $（document）.on（ "change"、 "input [name = 'multifile']"、function（）{var filearray1 = uploader.getFiles（）; += filearray1 [i] .size; filesizeonebyone.push（filearray1 [i] .size）; filename.push（filearray1 [i] .name）;} console.log（filesize）; console.log（filesize）; console.log（filesizeonebyone）; console.log（filename）; mutty-fife upload*/$（ "input [name = 'multiupload']"））終了****************************************** //パラメーターlastModifiedDate = [2016年4月27日16:45:01 GMT+0800（中国の標準時間）]、チャンク= [3]、Chunk = [0]、Type = [Audio/Wav]、uid = [yangl]、id = [wu_file_0]、size = [268620636] contentsdto.contentsid = [0000004730]、sextflg = [false]、status = [file]、 uploadNum=[0000004730]}******************************************************************************************************************************************/6.ContentsDetail.action
//バックグラウンドコードをアップロードするシングルファイルパブリックvoid ajaxattachupload（）{string path = "d：// test //"+filefileName; try {file = this.getFile（）; fileutil.randomaccessfile（path、file）; nullif（stringutils.isempty（chunk））{outjson（ "0"、 "success"、 ""）;} else {// chunk shard index、subscriptは0から始まります。 ""）;} else {outjson（ "2"、 "uploading" + filefilename + "chunk：" + chunk ""）;}}}}} {outjson（ "3"、 "upload failed"、 ""）;}}}}}}}}}}}}}}}}}}}}}}}}}fileutil.java
/***ファイルの書き込みを開始する場所を指定* @param tempfile入力ファイル* @param Outpathパス出力ファイルへのパス（パス +ファイル名）* @throws ioexception*/public static void randomacessfile（string outpath、file tempfile）throws ioexception {randomaccessfile = null file（outpath）; //読み取りおよび書き込みでターゲットファイルを開きますrafile = new RandomAccessFile（dirfile、 "rw"）; rafile.seek（rafile.length（））; inputstream = new bufferedinputStream（new fileinputStream（tempfile））; byte [] buf = new byte [1024]; int length = 0; ioException（e.getMessage（））;} fluly {try {try {if（inputstream！= null）{inputstream.close（）;} if（rafile！= null）{rafile.close（）;}} 7。効果画像
上記は、編集者が紹介したJavaの大きなファイル、単一ファイル、複数のファイルをアップロードする方法に関する関連する知識です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！