80 lines
3.9 KiB
HTML
80 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<base th:href="${#request.getContextPath() + '/'} ">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta charset="UTF-8"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/bootstrap/css/bootstrap.min.css"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/bootstrap-fileupload/css/fileinput.min.css"/>
|
|
<style>
|
|
.krajee-default.file-preview-frame .kv-file-content {height: 150px !important;}
|
|
.krajee-default.file-preview-frame .file-thumbnail-footer {height: 70px !important;;}
|
|
.krajee-default .file-footer-caption {margin-bottom:30px !important;}
|
|
.krajee-default .file-thumb-progress .progress, .krajee-default .file-thumb-progress .progress-bar {height: 20px !important;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="content" class="edit-content" style="padding: 5px;">
|
|
<div class="tile color">
|
|
<form id="form" method="post" class="form-horizontal" role="form" onsubmit="return doSubmitForm()">
|
|
<input id="uploadFile" th:name="${updateInputName}" type="file" multiple data-theme="fas" data-preview-file-type="text">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="uploadUrl" th:value="'api/file/'+ ${uploadPath}"/>
|
|
<input type="hidden" id="uploadType" th:value="${uploadType}"/>
|
|
<input type="hidden" id="allowFiles" th:value="${allowFiles}"/>
|
|
<input type="hidden" id="maxFileCount" th:value="${maxFileCount}"/>
|
|
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/vendor/bootstrap/js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/vendor/bootstrap-fileupload/js/fileinput.js"></script>
|
|
<script type="text/javascript" src="assets/js/vendor/bootstrap-fileupload/js/locales/zh.js"></script>
|
|
<script type="text/javascript">
|
|
var uploadFileArray = [];
|
|
function closeBox() {
|
|
top.dialog.closeBox();
|
|
}
|
|
function doSubmitForm() {
|
|
return false;
|
|
}
|
|
|
|
$(function () {
|
|
if ('' == $('#uploadType').val() || '-1' == $('#uploadType').val()) {
|
|
top.dialog.msg('文件上传类型错误');
|
|
}
|
|
var maxFileCount = top.dialog.maxFileCount == null ? $('#maxFileCount').val() : top.dialog.maxFileCount;
|
|
$('#uploadFile').fileinput({
|
|
language: 'zh', // 中文
|
|
uploadUrl: $('#uploadUrl').val(), // 服务器地址
|
|
allowedFileExtensions: $('#allowFiles').val().split(','), // 文件后缀
|
|
showUpload: false, // 显示上传按钮
|
|
showRemove: false, // 显示删除按钮
|
|
showPreview: true, // 是否预览
|
|
showCaption: false, // 是否标题
|
|
showClose: false, // 右上角关闭
|
|
showCancel: true, // 取消上传
|
|
dropZoneEnabled: true, // 是否拖拽区域
|
|
minFileCount: 0,
|
|
maxFileCount: maxFileCount, // 表示允许同时上传的最大文件个数
|
|
enctype: 'multipart/form-data',
|
|
previewFileType: 'any' // 预览文件格式
|
|
}).on('fileuploaded', function (event, data, previewId, index) {
|
|
var id = data.response;
|
|
uploadFileArray.push(id);
|
|
top.dialog.dialogData.uploadFileArray = uploadFileArray;
|
|
if(uploadFileArray.length >= maxFileCount) {
|
|
$('.btn-file').hide();
|
|
}
|
|
}).on('filesuccessremove', function(event, previewId, index) {
|
|
uploadFileArray.splice(index, 1);
|
|
if(uploadFileArray.length < maxFileCount) {
|
|
$('.btn-file').show();
|
|
}
|
|
top.dialog.dialogData.uploadFileArray = uploadFileArray;
|
|
}).on('fileerror', function(event, data, msg) {
|
|
top.dialog.msg(data.response.msg);
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |