Bootstrap-fileinput文件上传组件

<link href="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <%--<link href="${pageContext.request.contextPath}/bootstrap-fileinput/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>--%>    
    <link href="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>

<script src="${pageContext.request.contextPath}/bootstrap-fileinput/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/js/plugins/sortable.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/js/fileinput.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/js/locales/zh.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/bootstrap-fileinput/bootstrap-fileinput-master/themes/fa/theme.js"></script>

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 以前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input id="input-ke-2" name="photo" type="file" multiple>
    <script>
        // 上传附件
 let task_file_delete_url = "${pageContext.request.contextPath}/upload1.action"; $("#input-ke-2").fileinput({ language:'zh', // 多语言设置，须要引入local中相应的js，例如locales/zh.js
 dropZoneTitle: '能够将图片拖放到这里 …支持多文件上传', theme: "explorer-fa", // 主题
 uploadUrl: task_file_delete_url, // 上传地址
 minFileCount: 1, // 最小上传数量
 maxFileCount: 5, // 最大上传数量
 overwriteInitial: false, // 覆盖初始预览内容和标题设置
 showCancel:false, // 显示取消按钮
 showZoom:false, // 显示预览按钮
 showCaption:false, // 显示文件文本框
 dropZoneEnabled:true, // 是否可拖拽
 uploadLabel:"上传附件", // 上传按钮内容
 browseLabel: '选择附件', // 浏览按钮内容
 showRemove:false, // 显示移除按钮
 browseClass:"btn btn-primary", // 浏览按钮样式
 uploadClass:"btn btn-primary", // 上传按钮样式
            // uploadExtraData: {'taskId':1,'createBy':1,'createByname':1}, // 上传数据
 hideThumbnailContent:false, // 是否隐藏文件内容
 fileActionSettings: { // 在预览窗口中为新选择的文件缩略图设置文件操做的对象配置
 showRemove: false, // 显示删除按钮
 showUpload: true, // 显示上传按钮
 showDownload: false, // 显示下载按钮
 showZoom: false, // 显示预览按钮
 showDrag: false, // 显示拖拽
 removeIcon: '<span>X</span>', // 删除图标
 uploadIcon: '<span>↑</span>', // 上传图标
 uploadRetryIcon: '<span>☇</span>'  // 重试图标
 } /* , initialPreview: [ //初始预览内容 "https://picsum.photos/1920/1080?image=101", "https://picsum.photos/1920/1080?image=102", "https://picsum.photos/1920/1080?image=103" ], initialPreviewConfig: [ // 初始预览配置 caption 标题，size文件大小 ，url 删除地址，key删除时会传这个 {caption: "picture-1.jpg", size: 329892, width: "120px", url: task_file_delete_url, key: 101}, {caption: "picture-2.jpg", size: 872378, width: "120px", url: task_file_delete_url, key: 102}, {caption: "picture-3.jpg", size: 632762, width: "120px", url: task_file_delete_url, key: 103} ]*/ }); // 上传成功回调
 $("#input-ke-2").on("filebatchuploadcomplete", function() { // layer.msg("上传附件成功");
            // setTimeout("closeUpladLayer()",2000)
 }); // 上传失败回调
 $('#input-ke-2').on('fileerror', function(event, data, msg) { // layer.msg(data.msg);
            // tokenTimeOut(data);
 }); </script>