|
|
@@ -24,6 +24,9 @@
|
|
|
th:href="@{/assets/library/fonts/fontawesome6/css/all.min.css}"/>
|
|
|
<link rel="stylesheet" href="../../static/assets/library/jplugins/dropdown/css/dropdown.css"
|
|
|
th:href="@{/assets/library/jplugins/dropdown/css/dropdown.css}"/>
|
|
|
+ <link rel="stylesheet" href="../../static/assets/library/jplugins/filesUpload/css/filesUpload.css"
|
|
|
+ th:href="@{/assets/library/jplugins/filesUpload/css/filesUpload.css}"/>
|
|
|
+
|
|
|
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -45,10 +48,125 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+<div class="grid-3-columns files-upload">
|
|
|
+ <div class="grid-item">
|
|
|
+ <!-- 上传区域 -->
|
|
|
+ <div class="upload-area" id="uploadArea">
|
|
|
+ <div class="upload-icon">
|
|
|
+ <i class="fas fa-cloud-upload-alt"></i>
|
|
|
+ </div>
|
|
|
+ <div class="upload-text">
|
|
|
+ <h3>点击选择文件或拖放到此处</h3>
|
|
|
+ <p class="mb-0">支持图片、文档、视频等文件类型（禁止上传可执行文件）</p>
|
|
|
+
|
|
|
+ <div class="security-warning mt-3">
|
|
|
+ <strong><i class="fas fa-exclamation-triangle me-1"></i>安全限制：</strong>
|
|
|
+ <ul class="security-list mt-2">
|
|
|
+ <li><i class="fas fa-ban"></i>禁止上传 .exe, .bat, .sh, .jar 等可执行文件</li>
|
|
|
+ <li><i class="fas fa-shield-alt"></i>前端安全检查确保上传安全</li>
|
|
|
+ <li><i class="fas fa-infinity"></i>不限制文件大小</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="d-flex gap-3 justify-content-center mt-4">
|
|
|
+ <button class="btn btn-primary" id="selectFilesBtn">
|
|
|
+ <i class="fas fa-folder-open me-2"></i>选择文件
|
|
|
+ </button>
|
|
|
+ <button class="btn btn-outline-primary" id="selectFolderBtn">
|
|
|
+ <i class="fas fa-folder me-2"></i>选择文件夹
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <input type="file" id="fileInput" multiple style="display: none;">
|
|
|
+ <input type="file" id="folderInput" webkitdirectory directory multiple style="display: none;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="grid-item">
|
|
|
+ <!-- 上传队列信息 -->
|
|
|
+ <div class="queue-info" id="queueInfo">
|
|
|
+ <div>
|
|
|
+ <i class="fas fa-tasks me-2"></i>
|
|
|
+ <span id="queueStatus">队列中: <strong>0</strong> | 上传中: <strong>0</strong></span>
|
|
|
+ </div>
|
|
|
+ <div class="text-muted">
|
|
|
+ <small id="uploadSpeed">速度: 0 KB/s</small>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="grid-item">
|
|
|
+ <!-- 头部 -->
|
|
|
+ <div class="upload-header">
|
|
|
+ <div class="upload-stats">
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-value" id="totalFiles">0</div>
|
|
|
+ <div class="stat-label">总文件</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-value" id="successFiles">0</div>
|
|
|
+ <div class="stat-label">成功</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-value" id="failedFiles">0</div>
|
|
|
+ <div class="stat-label">失败</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 内容区域 -->
|
|
|
+ <div class="upload-content">
|
|
|
+ <!-- 提示信息 -->
|
|
|
+ <div class="alert alert-danger" id="errorAlert"></div>
|
|
|
+ <div class="alert alert-success" id="successAlert"></div>
|
|
|
+ <div class="alert alert-warning" id="warningAlert"></div>
|
|
|
+
|
|
|
+ <!-- 批量操作 -->
|
|
|
+ <div class="batch-actions" id="batchActions">
|
|
|
+ <div class="selected-count">
|
|
|
+ <i class="fas fa-check-circle me-2"></i>
|
|
|
+ 已选择 <span id="selectedCount">0</span> 个文件
|
|
|
+ </div>
|
|
|
+ <div class="d-flex gap-2">
|
|
|
+ <button class="btn btn-danger btn-sm" id="batchRemoveBtn">
|
|
|
+ <i class="fas fa-trash-alt me-1"></i>移除选中
|
|
|
+ </button>
|
|
|
+ <button class="btn btn-success btn-sm" id="batchUploadBtn">
|
|
|
+ <i class="fas fa-cloud-upload-alt me-1"></i>上传选中
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 文件列表 -->
|
|
|
+ <div class="files-section">
|
|
|
+ <h3 class="section-title">
|
|
|
+ <i class="fas fa-list me-2"></i>文件列表
|
|
|
+ <span class="badge bg-primary rounded-pill" id="listCount">0</span>
|
|
|
+ </h3>
|
|
|
+ <div class="files-list" id="filesList">
|
|
|
+ <!-- 文件项将动态添加到这里 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 文件预览 -->
|
|
|
+ <div class="preview-container" id="previewContainer">
|
|
|
+ <h3 class="section-title">
|
|
|
+ <i class="fas fa-image me-2"></i>文件预览
|
|
|
+ </h3>
|
|
|
+ <img class="preview-image" id="previewImage" src="" alt="预览图片">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 隐藏字段（用于表单提交） -->
|
|
|
+ <div class="d-none">
|
|
|
+ <input type="hidden" id="filePaths" name="file_paths" value="">
|
|
|
+ <input type="hidden" id="fileNames" name="file_names" value="">
|
|
|
+ <input type="hidden" id="fileTypes" name="file_types" value="">
|
|
|
+ <input type="hidden" id="fileSizes" name="file_sizes" value="">
|
|
|
+ <input type="hidden" id="fileHashes" name="file_hashes" value="">
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
<script src="../../static/assets/library/jquery/jquery.js" th:src="@{/assets/library/jquery/jquery.js}"></script>
|
|
|
<script src="../../static/assets/library/layui/layui.js" th:src="@{/assets/library/layui/layui.js}"></script>
|
|
|
<script src="../../static/assets/library/jplugins/dropdown/js/dropdown.js"
|
|
|
th:src="@{/assets/library/jplugins/dropdown/js/dropdown.js}"></script>
|
|
|
+<script src="../../static/assets/library/jplugins/filesUpload/js/filesUpload.js"
|
|
|
+ th:src="@{/assets/library/jplugins/filesUpload/js/filesUpload.js}"></script>
|
|
|
<script>
|
|
|
// POST 请求示例
|
|
|
$('.smart-dropdown').smartDropdown({
|
1