<%@ 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', //set language
'theme': 'explorer-fa',
'uploadUrl': '/file/uploadFilePlus.html',
allowedFileExtensions: ['jpg', 'gif', 'png'],//Received file suffix
uploadAsync: true, //default asynchronous upload
//showUpload:true, //whether to show the upload button
//showRemove :true, //Show remove button
//showPreview :true, //whether to show the preview
//showCaption:false,//whether to display the title
browseClass:"btn btn-primary", //Button style
maxFileCount:20, //indicates the maximum number of files allowed to be uploaded at the same time
autoReplace:true,//Whether the current image is automatically replaced, when set to true, select the file again, and the current file will be replaced.
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){//Pre-deletion of the above 3 loaded images
var abort = true;
if (confirm("Are you sure you want to delete this file?")) {
abort = false;
}
return abort; // you can also send any data/object that you can receive on `filecustomerror` event
}).on("filedeleted",function(event,data){//The post-deletion operations of the above 3 loaded pictures
//var result = data.response;
//alert(result.status);
//alert(1);
}).on("filesuccessremove",function(event,id){//Remove operation of successfully uploaded pictures
var abort = false;
if (confirm("Are you sure you want to delete this file?")) {
abort = true;
}
return abort; // you can also send any data/object that you can receive on `filecustomerror` event
}).on("fileuploaded",function(event,data){
//Use js's Array to add and delete files
var result = data.response;
alert(result.url);
});
});
</script>
<!-- browser support http://plugins.krajee.com/file-input -->
</html>