You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
324 lines
12 KiB
324 lines
12 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>File Upload</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f4f7fc;
|
|
padding: 20px;
|
|
}
|
|
h1 {
|
|
color: #4b4f56;
|
|
font-size: 2rem;
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
li {
|
|
margin: 5px 0;
|
|
padding: 10px;
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.file-name {
|
|
flex-grow: 1;
|
|
color: #007bff;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
.delete-button {
|
|
margin-left: 10px;
|
|
padding: 5px 10px;
|
|
background-color: #dc3545;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.delete-button:hover {
|
|
background-color: #c82333;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
background-color: #28a745;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
button:hover {
|
|
background-color: #218838;
|
|
}
|
|
#previewOverlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.8); /* 半透明遮罩 */
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#previewContent {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
max-width: 90%; /* 最大宽度为屏幕的90% */
|
|
max-height: 90%; /* 最大高度为屏幕的90% */
|
|
width: auto; /* 自适应宽度 */
|
|
height: auto; /* 自适应高度 */
|
|
}
|
|
|
|
img, video {
|
|
max-width: 100%; /* 图片最大宽度为容器的宽度 */
|
|
max-height: 100%; /* 图片最大高度为容器的高度 */
|
|
object-fit: contain; /* 保持原图比例，避免拉伸或裁剪 */
|
|
display: block;
|
|
}
|
|
|
|
/* 新增：确保内容区域的适配，避免裁剪 */
|
|
.preview-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<script>
|
|
let allFiles = [];
|
|
let showAll = false;
|
|
let currentPath = '/mnt/sese'; // 当前选择的路径，初始为默认路径
|
|
|
|
async function uploadFile(event) {
|
|
event.preventDefault();
|
|
|
|
const formData = new FormData();
|
|
|
|
// 获取文件输入框中的所有文件
|
|
const fileInput = document.getElementById('fileInput');
|
|
const files = fileInput.files;
|
|
|
|
if (files.length === 0) {
|
|
alert('Please select at least one file to upload.');
|
|
return;
|
|
}
|
|
|
|
// 将所有选中的文件添加到 FormData
|
|
for (let i = 0; i < files.length; i++) {
|
|
formData.append('files', files[i]); // 'files' 是后端接收字段名
|
|
}
|
|
|
|
// 获取选择的上传路径
|
|
const uploadPath = document.getElementById('uploadPath').value;
|
|
formData.append('uploadPath', uploadPath);
|
|
|
|
// 获取按钮和显示组件
|
|
const uploadButton = document.getElementById('uploadButton');
|
|
const progressIndicator = document.getElementById('progressIndicator');
|
|
const messageBox = document.getElementById('messageBox');
|
|
|
|
// 禁用按钮并显示上传进度
|
|
uploadButton.disabled = true;
|
|
progressIndicator.style.display = 'inline';
|
|
|
|
try {
|
|
const response = await fetch('/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
// 上传完成后恢复按钮状态和隐藏进度指示器
|
|
progressIndicator.style.display = 'none';
|
|
uploadButton.disabled = false;
|
|
|
|
if (data.status === 'success') {
|
|
messageBox.innerHTML = `<p style="color:green;">${data.message}</p>`;
|
|
allFiles = data.files; // 假设后端返回文件列表
|
|
renderFileList();
|
|
} else {
|
|
messageBox.innerHTML = `<p style="color:red;">${data.message}</p>`;
|
|
}
|
|
} catch (error) {
|
|
// 处理上传失败情况
|
|
progressIndicator.style.display = 'none';
|
|
uploadButton.disabled = false;
|
|
messageBox.innerHTML = '<p style="color:red;">Upload failed</p>';
|
|
}
|
|
}
|
|
|
|
async function fetchFiles() {
|
|
// 获取当前选择的路径
|
|
const uploadPath = document.getElementById('uploadPath').value || currentPath;
|
|
|
|
// 请求获取该路径下的文件
|
|
const response = await fetch(`/files?path=${encodeURIComponent(uploadPath)}`);
|
|
const data = await response.json();
|
|
|
|
if (data.files) {
|
|
allFiles = data.files;
|
|
renderFileList();
|
|
} else {
|
|
console.error("Error fetching files:", data.message);
|
|
}
|
|
}
|
|
|
|
function renderFileList() {
|
|
const filesList = document.getElementById('filesList');
|
|
filesList.innerHTML = ''; // 清空现有的文件列表
|
|
|
|
const filesToShow = showAll ? allFiles : allFiles.slice(0, 10);
|
|
|
|
filesToShow.forEach(file => {
|
|
const listItem = document.createElement('li');
|
|
|
|
const fileNameSpan = document.createElement('span');
|
|
fileNameSpan.textContent = file;
|
|
fileNameSpan.className = 'file-name';
|
|
fileNameSpan.onclick = () => previewFile(file); // 点击文件名调用预览函数
|
|
|
|
const deleteButton = document.createElement('button');
|
|
deleteButton.textContent = 'Del';
|
|
deleteButton.className = 'delete-button';
|
|
deleteButton.onclick = () => confirmDelete(file);
|
|
|
|
listItem.appendChild(fileNameSpan);
|
|
listItem.appendChild(deleteButton);
|
|
|
|
filesList.appendChild(listItem);
|
|
});
|
|
|
|
const toggleButton = document.getElementById('toggleButton');
|
|
toggleButton.textContent = showAll ? 'Show Less Files' : 'Show All Files';
|
|
toggleButton.style.display = allFiles.length > 10 ? 'inline-block' : 'none';
|
|
}
|
|
|
|
|
|
function toggleFileList() {
|
|
showAll = !showAll;
|
|
renderFileList();
|
|
}
|
|
|
|
async function confirmDelete(fileName) {
|
|
const confirmation = confirm(`Are you sure you want to delete ${fileName}?`);
|
|
if (confirmation) {
|
|
await deleteFile(fileName);
|
|
}
|
|
}
|
|
|
|
async function deleteFile(fileName) {
|
|
try {
|
|
const uploadPath = document.getElementById('uploadPath').value || currentPath; // 获取当前路径
|
|
const response = await fetch(`/delete?file=${encodeURIComponent(fileName)}&path=${encodeURIComponent(uploadPath)}`, { method: 'DELETE' });
|
|
const data = await response.json();
|
|
|
|
if (data.status === 'success') {
|
|
allFiles = allFiles.filter(file => file !== fileName);
|
|
renderFileList();
|
|
} else {
|
|
alert(`Error deleting file: ${data.message}`);
|
|
}
|
|
} catch (error) {
|
|
alert('Failed to delete file.');
|
|
}
|
|
}
|
|
|
|
function previewFile(fileName) {
|
|
const uploadPath = document.getElementById('uploadPath').value || currentPath; // 获取当前路径
|
|
const overlay = document.getElementById('previewOverlay');
|
|
const previewContent = document.getElementById('previewContent');
|
|
|
|
previewContent.innerHTML = ''; // 清空现有的预览内容
|
|
//const filePath = `/files?path=${encodeURIComponent(uploadPath)}/${fileName}`; // 拼接完整的文件路径
|
|
const filePath = `/static/${encodeURIComponent(fileName)}?path=${encodeURIComponent(uploadPath)}`; // 拼接完整的文件路径
|
|
|
|
console.log("Dynamic Static URL:", filePath);
|
|
|
|
const fileExtension = fileName.split('.').pop().toLowerCase();
|
|
const previewContainer = document.createElement('div');
|
|
previewContainer.className = 'preview-container';
|
|
|
|
if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(fileExtension)) {
|
|
const img = document.createElement('img');
|
|
img.src = filePath;
|
|
previewContainer.appendChild(img);
|
|
} else if (['mp4','mov','avi','wmv', 'webm', 'ogg'].includes(fileExtension)) {
|
|
const video = document.createElement('video');
|
|
video.src = filePath;
|
|
video.controls = true;
|
|
previewContainer.appendChild(video);
|
|
} else {
|
|
previewContainer.textContent = 'Preview not supported for this file type.';
|
|
}
|
|
|
|
previewContent.appendChild(previewContainer);
|
|
overlay.style.display = 'flex';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// 监听上传路径下拉框的变化
|
|
document.getElementById('uploadPath').addEventListener('change', function() {
|
|
currentPath = this.value; // 更新当前选择的路径
|
|
fetchFiles(); // 重新加载文件列表
|
|
});
|
|
|
|
fetchFiles();
|
|
|
|
const overlay = document.getElementById('previewOverlay');
|
|
overlay.addEventListener('click', (event) => {
|
|
if (event.target === overlay) {
|
|
overlay.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Upload a file</h1>
|
|
<form id="uploadForm" onsubmit="uploadFile(event)" enctype="multipart/form-data">
|
|
<!-- 添加路径选择 -->
|
|
<label for="uploadPath">Choose upload path:</label>
|
|
<select id="uploadPath" name="uploadPath">
|
|
<option value="/mnt/sese">/mnt/sese</option>
|
|
<option value="/mnt/self">/mnt/self</option>
|
|
<option value="/mnt/ttings">/mnt/ttings</option>
|
|
<option value="/mnt/temp">/mnt/temp</option>
|
|
<!--loc-->
|
|
<option value="/Users/zgz/Documents/images">/Users/zgz/Documents/images (Local)</option>
|
|
<option value="/Users/zgz/Documents/images/share">/Users/zgz/Documents/images/share (Local)</option>
|
|
</select>
|
|
|
|
<input type="file" id="fileInput" name="files" multiple/>
|
|
<button id="uploadButton" type="submit">Upload</button>
|
|
<span id="progressIndicator" style="display:none;">Uploading...</span>
|
|
</form>
|
|
|
|
<div id="messageBox"></div>
|
|
<h2>Uploaded files:</h2>
|
|
<ul id="filesList"></ul>
|
|
<button id="toggleButton" onclick="toggleFileList()" style="display:none;">Show All Files</button>
|
|
|
|
<div id="previewOverlay">
|
|
<div id="previewContent"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|