jspページ
<％ページ言語@ = "javaの" contentTypeの= "text / htmlの;のcharset = UTF-8"
pageEncodingは= "UTF-8" ％>
<％@ includeファイル= "/ WEB-INF /共通/ common.jsp" ％ >
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>ここで挿入タイトル</ TITLE>
<リンクのrel = "スタイルシート"のhref = "CSS / layui.css">
< / HEAD>
<BODY>
<DIV CLASS = "layuiアップロード">
<ボタンタイプ= "ボタン"クラス= "layui-BTN layui-BTN正常" ID = "testlistという">选择多文件</ボタン>
<DIVクラス= "layuiアップロードリスト">
<テーブルクラス= "layui-表">
<THEAD>
<TR> <TH>ファイル名</ TH>
<TH>大きさ</ TH>
<TH>状況</ TH>
<TH>操作</ TH>
</ TR> </ THEAD>
<TBODY ID = "demoList"> </ TBODY>
</ TABLE>
</ div>
<ボタンタイプ= "ボタン"クラス= "layui-BTN" ID = "testListAction">开始上传</ボタン>
</ div>
</ BODY>
<スクリプトタイプ= "テキスト/ javascriptの" SRC = "JS / layui.js"> </ SCRIPT>
ます。<script type = "text / javascriptの" SRC = "JS / layui.all.js"> </スクリプト>
ます。<script type = "text / javascriptの" SRC = "JS / jqueryの-2.1.1.min.js"> </ SCRIPT>
ます。<script type = "text / javascriptの" SRC = "JS / jqueryの-1.12.3 .js "> </ SCRIPT>
ます。<script type =" text / javascriptの">
layui.use（ 'アップロード'、機能（）{
VAR $ = layui.jquery
、アップロード= layui.upload;
//ファイルリストの典型的なマルチ
VAR demoListView = $（ '＃のdemoList'）
、uploadListIns = upload.render（{
elemは： '#testList'
、URL： '<％=％パス> / Lol_uploadFile.action'は
、受け入れ： 'ファイル'を
、データ：ID {：} // 123は、パラメータ123 = ID、パラメータを渡すことができる
複数の、：trueに
、自動：falseに
、bindAction ： '#testListAction'
、成功：関数（MSG）{
。$の.each（$ parseJSON（msg.jsonData）、機能（I、アイテム）{
。IF（item.fileName == 1）{
アラート（ "OK"）;
他{}
アラート（ "OK"）;
}
}）;
}
、選択します。機能（OBJ）{
VAR = obj.pushFile this.filesファイル=（）;ファイルは、ファイル選択したキューに追加されます//たび
//ローカルファイルの読み込み
obj.previewを（機能（インデックス、ファイル、結果）{
VAR TR = $（[ '<TR ID = "アップロード- ' +インデックス+ '">'
、 '<TD>' + file.name + '</ TD>'
、 '<TD>' +（file.size / 1014）.toFixed（1）+ 'KB </ TD>'
、 '<TD>等待上传</ TD>'
、 '<TD>'
、「<ボタンクラス= "layui-BTN layui-BTN-XSデモリロードlayui隠す">重传</ボタン>
'' <ボタンクラス= "layui-BTN layui-BTN-XS layui-BTN-危険デモ・削除">删除</ボタン>」
、 '</ TD>'
、'</ TR>']加わります。（ ''））;
//单个重传
tr.find（ 'デモリロード。 '）に（'クリック'、関数（）{
obj.upload（インデックスファイル）;
}）;
//删除
。tr.find（ 'デモ-削除'）上（'クリック'、機能（）{
ファイル[インデックス]を削除します。
demoListView.append（TR）;
}）;
}
、DONE：機能（RES、インデックス、アップロード）{
。$ .each（$ parseJSON（res.jsonData）、機能（I、項目）{
IF（== item.success 1）{//正常にアップロード
するvar demoListView.findのTR =（ 'アップロードTR＃ - ' +インデックス）
、TDS = tr.children（）;
tds.eq（2）.htmlを（「<スパンのスタイル=「色：＃ 5FB878;「>アップロードに成功</ span>の'）;
tds.eq（3）.htmlを（'「）; //消去
リターンがthis.files [インデックス]を削除; //ファイルを正常にアップロードされたファイルのキューを削除すること
}
}）;
this.error（インデックス、アップロード）;
}
、エラー：関数（指数、アップロード）{
VARのdemoListView.find TR =（ 'アップロードTR位- ' +指数）
、TR = TDS。子供（）;
tds.eq（2）.htmlを（ '<スパンのスタイル= "色：＃1 FF5722は;"> </ span>のアップロードに失敗した'）;
。tds.eq .find（ '-デモ。リロード'）removeClass（（3） 'layui隠す'）; //表示再送
}
}）;
}）;
</ SCRIPT>
</ HTML>
アクションメソッド
我々は2つのプロパティを追加する必要があります
一覧<ファイル>ファイル;
一覧<文字列> fileFileName。
//対応するgetを追加することを忘れないでください、設定
パブリック文字列updateImg（）は例外{スロー
=新しいJSONArray（）JSONArrayアレイ。
JSONObject OBJ =新しいJSONObject（）;
IF（UploadFile.uploadFileBase（0、ファイル、fileFileName、UPLOADDIR））{
BusinessImage bsnImg =新しいBusinessImage（）。
bsnImg.setId（Integer.parseInt（imgId））。
bsnImg.setImgUrl（UPLOADDIR + "/" + fileFileName.get（0））。
businessImageServiceImpI.updateBusinessImageAjax（bsnImg）。
obj.put（ "成功"、 "1"）;
}他{
obj.put（ "成功"、 "0"）。
}
array.put（OBJ）。
jsonData = array.toString（）。
System.out.println（jsonData）。
SUCCESSを返します。
}
写真のアップロードツール
パッケージcom.gxuwz.core.util。
インポートのjava.io.File;
輸入java.io.FileInputStream;
輸入java.io.FileNotFoundException。
輸入java.io.FileOutputStreamは、
インポートにjava.io.IOException;
輸入java.io.InputStreamを。
インポートにjava.io.OutputStream;
輸入はjava.util.List;
輸入org.apache.struts2.ServletActionContext;
パブリッククラスUploadFile {
@SuppressWarnings（ "廃止"）
パブリック静的ブールuploadFileBaseは、（i int型、リスト<ファイル>ファイル、リスト<文字列> fileFileName、文字列uploadPathは）{例外をスロー
{試す
=新しいFileInputStreamを（file.get（私にInputStreamを））;
文字列DIR = ServletActionContext.getRequest（）getRealPath（uploadPath）。
FileLocationファイル=新しい新しいファイル（dirは）;
//ここでは、また、目標がアプリケーションディレクトリ内のディレクトリをアップロード作成することができ、手動で
IF {（fileLocation.exists（）！）
ブールisCreated = fileLocation.mkdir（）;
IF（！isCreated）{
/ /一般的なことが起こるべきではありません、カスタム例外を投げるなど、他の治療法を、行う、ターゲットディレクトリの作成に失敗したアップロードします。
falseを返す;
}
}
文字列fileNameに= fileFileName.get（I）;
ファイル= uploadFile新しい新しいファイル（ディレクトリファイル名）;
のOutputStreamたFileOutputStream新しい新OUT =（uploadFile）;
バイト[] =新しい新しいバイトのバッファ[1024×1024];
int型の長さ;
一方、（（長さ= in.read（緩衝液））> 0）{
out.write（バッファ、0、長さ）。
}
in.close（）。
out.close（）;
trueを返します。
}キャッチ（にFileNotFoundExceptionのEX）{
ex.printStackTrace（）;
falseを返します。
}キャッチ（のIOExceptionのEX）{
ex.printStackTrace（）;
falseを返します。
}
}
}
ない場合は、struct.xmlでのお読みください
<パッケージ名= "データJSONは" = "JSONデフォルト"名前空間を拡張= "/">
<アクション名= "* _ *"クラス= "com.gxuwz.Market.business.action.web。{1}アクション"メソッド=" {2} ">
<結果名="成功」タイプ= "JSON">
<PARAM NAME = "JSON"> jsonData </ param>の
</結果>
</アクション>
</パッケージ>