<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String version = application.getAttribute("version").toString();
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<base href="<%=basePath%>">
<!-- release v4.4.6, copyright 2014 - 2017 Kartik Visweswaran -->
<!--suppress JSUnresolvedLibraryURL -->
<title>upload fileinput</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fileinput/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="css/fileinput/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
<link href="css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/fileinput/plugins/sortable.js" type="text/javascript"></script>
<script src="js/fileinput/fileinput.js" type="text/javascript"></script>
<script src="js/fileinput/locales/zh.js" type="text/javascript"></script>
<script src="css/fileinput/themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="css/fileinput/themes/fa/theme.js" type="text/javascript"></script>
<script src="js/fileinput/popper.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container kv-main">
<form enctype="multipart/form-data">
<div class="file-loading">
<input id="kv-explorer" name="image" type="file" multiple>
</div>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
</div>
</body>
<script>
$(document).ready(function () {
$("#kv-explorer").fileinput({
language: 'zh', //设置语言
'theme': 'explorer-fa',
'uploadUrl': '/file/uploadFilePlus.html',
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
uploadAsync: true, //默认异步上传
//showUpload:true, //是否显示上传按钮
//showRemove :true, //显示移除按钮
//showPreview :true, //是否显示预览
//showCaption:false,//是否显示标题
browseClass:"btn btn-primary", //按钮样式
maxFileCount:20, //表示允许同时上传的最大文件个数
autoReplace:true,//是否自动替换当前图片,设置为true时,再次选择文件, 会将当前的文件替换掉。
overwriteInitial: false,
initialPreviewAsData: true,
initialPreview: [
"http://lorempixel.com/1920/1080/nature/1",
"http://lorempixel.com/1920/1080/nature/2",
"http://lorempixel.com/1920/1080/nature/3"
],
initialPreviewConfig: [
{caption: "nature-1.jpg", size: 329892, width: "120px", url: "/file/deleteFile.html", key: "a"},
{caption: "nature-2.jpg", size: 872378, width: "120px", url: "/file/deleteFile.html", key: "b"},
{caption: "nature-3.jpg", size: 632762, width: "120px", url: "/file/deleteFile.html", key: "c"}
]
}).on("filepredelete",function(event,key){//上面3个已经加载图片的预删除
var abort = true;
if (confirm("确定要删除这个文件吗?")) {
abort = false;
}
return abort; // you can also send any data/object that you can receive on `filecustomerror` event
}).on("filedeleted",function(event,data){//上面3个已经加载图片的删除后操作
//var result = data.response;
//alert(result.status);
//alert(1);
}).on("filesuccessremove",function(event,id){//上传成功的图片的删除操作
var abort = false;
if (confirm("确定要删除这个文件吗?")) {
abort = true;
}
return abort; // you can also send any data/object that you can receive on `filecustomerror` event
}).on("fileuploaded",function(event,data){
//使用js的Array进行文件的添加删除管理
var result = data.response;
alert(result.url);
});
});
</script>
<!-- 浏览器支持 http://plugins.krajee.com/file-input -->
</html>