<!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 customType = top.restAjax.params(window.location.href).customType;
    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: customType ? customType.split(',') : $('#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>