< /p>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
文字列パス = request.getContextPath();
文字列basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<頭>
<メタ文字セット="utf-8">
<title>画像上転送</title>
<!-- jq -->
<script type="text/javascript" src="<%=basePath%>static/plugs/jquery-3.1.1.min.js"></script>
<!-- ブートストラップ -->
<link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap/js/bootstrap.min.js"></script>
<!-- 画像上即使用预览插件 -->
<link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap-fileinput/css/fileinput.min.css">
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/locales/zh.js"></script>
<スタイル>
.container{パディングトップ:60px}
</スタイル>
</head>
<本体>
<p class="コンテナ">
<p class="行">
<p class="col-sm-6col-sm-offset-3">
<form class="form-horizontal" role="form" method="post" action="<%=basePath%>uploadFile" enctype="multipart/form-data" >
<p class="フォームグループ">
<label class="col-sm-2 control-label">説明</label>
<p class="col-sm-10">
<input type="text" name="describ" class="col-sm-10 form-control" placeholder="请描述">
</p>
</p>
<p class="フォームグループ">
<label class="col-sm-2 control-label">文件</label>
<p class="col-sm-10">
<input type="file" name="myfile" data-ref="url" class="file-loading myfile" accept="text/plain" multiple/>
<input name="myfile" type="file" class="file myfile" multiple data-show-upload="false" data-show-caption="true">
</p>
</p>
<p class="フォームグループ">
<label class="col-sm-2 control-label">封面</label>
<p class="col-sm-10">
<input type="file" name="myfile" data-ref="url2" class="col-sm-10 myfile" multiple/>
</p>
</p>
<button type="submit" class="btn btn-defaultcol-sm-2col-sm-offset-4">提交</button>
</フォーム>
</p>
</p>
</p>
<スクリプト>
/* var imgObj = document.getElementById("myfile");
アラート(imgObj); */
$(".myfile").fileinput({
UploadUrl:"<%=basePath%>uploadFile",// 上の地址
UploadAsync:false, //默认异步上传
showUpload: false, //否か表示上传按钮,跟随文本框的那个
showRemove : true, //显示移除按钮,跟随文本框的那个
showCaption: true,//否か标题,就是那个文本框
showPreview : true, // 否か表示预览,不写默认は true
dropZoneEnabled: false,// 表示領域が表示されているかどうか、true であると認識されていますが、大領域を占有しています
//minImageWidth: 50, //画像の最小幅
//minImageHeight: 50,//画像の最小高さ
//maxImageWidth: 1000,//写真の最大幅
//maxImageHeight: 1000,//写真の最大高さ
//maxFileSize: 0,//单位がkb、0の場合は無制限のファイルサイズを表示
//minFileCount: 0,
maxFileCount: 4, // 同時に送信される最大ファイル数を表示します
//enctype: 'multipart/form-data',
validateInitialCount:true、
reviewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数({n}) 超过允许の最大数值{m}!",
allowedFileTypes: ['image','text'],//配置允许文書上の種類
allowedPreviewTypes : [ 'image','text'],// 配置されたすべての被定義ファイルの種類
allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ,'txt'],//制御被预览的すべての mime タイプ
言語: 'zh'
})
//异步上传返結果处処理
$('.myfile').on('fileerror', function(event, data, msg) {
console.log("ファイルエラー");
コンソール.ログ(データ);
});
//异步上传返し结果处処理
$(".myfile").on("fileuploaded", 関数 (イベント、データ、プレビュー ID、インデックス) {
console.log("ファイルがアップロードされました");
var ref=$(this).attr("データ参照");
$("input[name='"+ref+"']").val(data.response.url);
});
//同上传错误处理
$('.myfile').on('filebatchuploaderror', function(event, data, msg) {
console.log("ファイルバッチアップロードエラー");
コンソール.ログ(データ);
});
//同上传返結果处処理
$(".myfile").on("filebatchuploadsuccess", 関数 (イベント、データ、プレビュー ID、インデックス) {
console.log("ファイルバッチアップロード成功");
コンソール.ログ(データ);
});
//上前
$('.myfile').on('filepreupload', function(イベント, データ, プレビュー ID, インデックス) {
console.log("ファイルプレアップロード");
});
</スクリプト>
</ボディ>
</html>
公式ドキュメントのオプション(設定)では
ファイルの削除/クリアボタンを表示するかどうかのブール値。デフォルトは true です これを false に設定することもできます