<!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"/>
    <link type="text/css" rel="stylesheet" href="assets/css/minimal.css"/>
    <link type="text/css" rel="stylesheet" href="assets/css/system.css"/>
    <style>.progress-bar {line-height: 11px;}</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" src="assets/js/common.js"></script>
<script type="text/javascript">
    var uploadFileArray = [];
    function closeBox() {
        top.DialogBox.closeBox();
    }
    function doSubmitForm() {
        return false;
    }

    $(function () {
        if ('' == $('#uploadType').val() || '-1' == $('#uploadType').val()) {
            top.DialogBox.msg('文件上传类型错误');
        }
        $('#uploadFile').fileinput({
            language: 'zh',	// 中文
            uploadUrl: $('#uploadUrl').val(), // 服务器地址
            allowedFileExtensions: $('#allowFiles').val().split(','), // 文件后缀
            showUpload: true,               // 显示上传按钮
            showRemove: true,               // 显示删除按钮
            showPreview: true,              // 是否预览
            showCaption: false,             // 是否标题
            showClose: false,               // 右上角关闭
            showCancel: true,               // 取消上传
            dropZoneEnabled: true,          // 是否拖拽区域
            minFileCount: 0,
            maxFileCount: top.DialogBox.maxFileCount == null ? $('#maxFileCount').val() : top.DialogBox.maxFileCount,                // 表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            previewFileType: 'any' // 预览文件格式
        }).on('fileuploaded', function (event, data, previewId, index) {
            var id = data.response;
            uploadFileArray.push(id);
            top.DialogBox.dialogData.uploadFileArray = uploadFileArray;
        }).on('fileerror', function(event, data, msg) {
            top.DialogBox.msg(data.response.msg);
        });
    })
</script>
</body>
</html>