bug fix
This commit is contained in:
@@ -18,7 +18,7 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', sans-serif;
|
||||
background: linear-gradient(to bottom, #4995FF 0%, #ffffff 100%);
|
||||
background: linear-gradient(to bottom, #4995ff 0%, #ffffff 100%);
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 20px 20px ;
|
||||
padding: 20px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@@ -291,7 +291,7 @@
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
background: linear-gradient(135deg, #4191FE 0%, #a5c6f7 100%);
|
||||
background: linear-gradient(135deg, #4191fe 0%, #a5c6f7 100%);
|
||||
color: white;
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
@@ -499,7 +499,7 @@
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 限制提示样式 */
|
||||
.limit-info {
|
||||
background: #fff8e1;
|
||||
@@ -514,16 +514,16 @@
|
||||
gap: 8px;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.limit-info.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.limit-icon {
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
.limit-text {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -542,16 +542,16 @@
|
||||
gap: 8px;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.limit-warning-info.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.limit-warning-icon {
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
.limit-warning-text {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -576,7 +576,7 @@
|
||||
<span class="limit-warning-icon">⚠️</span>
|
||||
<div class="limit-warning-text" id="limitWarningText">已超过文件上传总数限制</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="upload-section">
|
||||
<h3 class="section-title">📎 选择文件</h3>
|
||||
<div class="upload-area" id="uploadArea">
|
||||
@@ -635,7 +635,7 @@
|
||||
const sessionId = urlParams.get('sessionId');
|
||||
const uploadApi = urlParams.get('uploadApi');
|
||||
const fileCountParam = urlParams.get('fileCount');
|
||||
|
||||
|
||||
// 配置常量
|
||||
const MAX_FILE_COUNT = fileCountParam ? parseInt(fileCountParam) : 2; // 从URL参数获取,默认为2
|
||||
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
|
||||
@@ -677,13 +677,13 @@
|
||||
function init() {
|
||||
// 更新限制提示文本
|
||||
updateLimitText();
|
||||
|
||||
|
||||
// 显示限制提示
|
||||
limitInfo.classList.add('show');
|
||||
|
||||
|
||||
// 检查本地存储中已上传的文件数量
|
||||
checkUploadedCount();
|
||||
|
||||
|
||||
// 事件监听
|
||||
fileInput.addEventListener('change', handleFileSelect);
|
||||
clearBtn.addEventListener('click', clearAllFiles);
|
||||
@@ -723,11 +723,13 @@
|
||||
|
||||
// 检查已上传的文件数量
|
||||
function checkUploadedCount() {
|
||||
// 使用sessionStorage存储当前会话的上传数量
|
||||
// 如果要永久存储,可以改用localStorage
|
||||
if (sessionStorage.getItem('sessionId') && sessionStorage.getItem('sessionId') != sessionId) {
|
||||
sessionStorage.setItem('uploadedFileCount', '0');
|
||||
}
|
||||
// // 使用sessionStorage存储当前会话的上传数量
|
||||
// // 如果要永久存储,可以改用localStorage
|
||||
const storedCount = sessionStorage.getItem('uploadedFileCount');
|
||||
uploadedCount = storedCount ? parseInt(storedCount) : 0;
|
||||
|
||||
// 更新警告提示
|
||||
updateWarningText();
|
||||
}
|
||||
@@ -736,7 +738,7 @@
|
||||
function updateWarningText() {
|
||||
if (MAX_FILE_COUNT > 0 && uploadedCount >= MAX_FILE_COUNT) {
|
||||
limitWarningInfo.classList.add('show');
|
||||
limitWarningText.textContent = `已超过文件上传总数限制(${MAX_FILE_COUNT}个)`;
|
||||
limitWarningText.textContent = `已达文件上传总数限制(${MAX_FILE_COUNT}个)`;
|
||||
} else {
|
||||
limitWarningInfo.classList.remove('show');
|
||||
}
|
||||
@@ -766,7 +768,7 @@
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
e.preventDefault();
|
||||
uploadArea.classList.add('dragover');
|
||||
});
|
||||
@@ -821,7 +823,7 @@
|
||||
}
|
||||
|
||||
// 检查是否会导致超过总数限制
|
||||
if (MAX_FILE_COUNT > 0 && (uploadedCount + selectedFiles.length) >= MAX_FILE_COUNT) {
|
||||
if (MAX_FILE_COUNT > 0 && uploadedCount + selectedFiles.length >= MAX_FILE_COUNT) {
|
||||
showError(`已超过文件上传总数限制(${MAX_FILE_COUNT}个)`);
|
||||
break;
|
||||
}
|
||||
@@ -1011,18 +1013,18 @@
|
||||
fileInput.disabled = true;
|
||||
uploadText.textContent = '文件上传总数已达上限';
|
||||
uploadHint.innerHTML = `总共可上传 ${MAX_FILE_COUNT} 个文件<br />已上传: ${uploadedCount}`;
|
||||
|
||||
|
||||
// 禁用按钮
|
||||
clearBtn.disabled = true;
|
||||
uploadBtn.disabled = true;
|
||||
|
||||
|
||||
// 显示限制警告提示
|
||||
limitWarningInfo.classList.add('show');
|
||||
limitWarningText.textContent = `已超过文件上传总数限制(${MAX_FILE_COUNT}个)`;
|
||||
} else {
|
||||
// 更新上传区域状态
|
||||
uploadArea.classList.remove('disabled');
|
||||
|
||||
|
||||
// 根据文件数量更新上传区域
|
||||
if (MAX_FILE_COUNT <= 0) {
|
||||
// 如果没有设置文件数量限制,始终可以上传
|
||||
@@ -1047,9 +1049,9 @@
|
||||
// 更新上传按钮文本
|
||||
if (hasFiles && !isTotalLimitReached) {
|
||||
const totalSize = selectedFiles.reduce((sum, file) => sum + file.size, 0);
|
||||
uploadBtn.innerHTML = `<span>⬆️</span> 上传 (${selectedFiles.length}/${MAX_FILE_COUNT}, ${formatFileSize(
|
||||
totalSize
|
||||
)})`;
|
||||
uploadBtn.innerHTML = `<span>⬆️</span> 上传 (${
|
||||
selectedFiles.length
|
||||
}/${MAX_FILE_COUNT}, ${formatFileSize(totalSize)})`;
|
||||
} else {
|
||||
uploadBtn.innerHTML = `<span>⬆️</span> 开始上传`;
|
||||
}
|
||||
@@ -1123,12 +1125,13 @@
|
||||
// 更新已上传的文件数量
|
||||
uploadedCount += successCount;
|
||||
saveUploadedCount();
|
||||
|
||||
|
||||
showSuccess(`成功上传 ${successCount} 个文件${failCount > 0 ? `,${failCount} 个失败` : ''}`);
|
||||
// 清空文件列表
|
||||
clearAllFiles();
|
||||
// 更新UI
|
||||
updateUI();
|
||||
sessionStorage.setItem('sessionId', sessionId);
|
||||
} else {
|
||||
showError('文件上传失败,请重试');
|
||||
}
|
||||
@@ -1246,4 +1249,4 @@
|
||||
document.addEventListener('drop', (e) => e.preventDefault());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user