commit
b8dc7fbd6d
@ -0,0 +1,115 @@
|
|||||||
|
from flask import Flask, request, jsonify, render_template, send_from_directory
|
||||||
|
import os
|
||||||
|
|
||||||
|
# 默认配置
|
||||||
|
DEFAULT_UPLOAD_FOLDER = "/Users/zgz/Documents/images"
|
||||||
|
#DEFAULT_UPLOAD_FOLDER = "/mnt/sese"
|
||||||
|
|
||||||
|
ALLOWED_EXTENSIONS = {
|
||||||
|
'png', 'jpg', 'jpeg', 'gif', 'bmp', 'tiff', 'webp','heic', # 图片类型
|
||||||
|
'mp4', 'mov', 'wmv', 'avi', 'm4v', 'mpg', 'mpeg', 'flv', 'mkv', '3gp', 'webm' # 视频类型
|
||||||
|
}
|
||||||
|
MAX_FILE_SIZE = 88 * 1024 * 1024 # 88MB
|
||||||
|
app = Flask(__name__, static_folder=None)
|
||||||
|
#app = Flask(__name__, static_folder=DEFAULT_UPLOAD_FOLDER, static_url_path="/files")
|
||||||
|
app.config['UPLOAD_FOLDER'] = DEFAULT_UPLOAD_FOLDER
|
||||||
|
app.config['MAX_CONTENT_LENGTH'] = MAX_FILE_SIZE
|
||||||
|
|
||||||
|
|
||||||
|
def allowed_file(filename):
|
||||||
|
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
|
||||||
|
|
||||||
|
|
||||||
|
def list_files(directory):
|
||||||
|
"""列出指定目录下的所有文件并按时间排序"""
|
||||||
|
if not os.path.exists(directory):
|
||||||
|
return []
|
||||||
|
files = []
|
||||||
|
for root, _, filenames in os.walk(directory):
|
||||||
|
for filename in filenames:
|
||||||
|
files.append(os.path.relpath(os.path.join(root, filename), directory))
|
||||||
|
files.sort(key=lambda x: os.path.getmtime(os.path.join(directory, x)), reverse=True) # 按时间降序排序
|
||||||
|
return files
|
||||||
|
|
||||||
|
@app.route('/delete', methods=['DELETE'])
|
||||||
|
def delete_file():
|
||||||
|
# 获取当前选择的路径，默认路径为 DEFAULT_UPLOAD_FOLDER
|
||||||
|
upload_path = request.args.get('path', DEFAULT_UPLOAD_FOLDER)
|
||||||
|
|
||||||
|
file_name = request.args.get('file')
|
||||||
|
if not file_name:
|
||||||
|
return jsonify({'status': 'error', 'message': 'File name is required'}), 400
|
||||||
|
|
||||||
|
file_path = os.path.join(upload_path, file_name)
|
||||||
|
if not os.path.exists(file_path):
|
||||||
|
return jsonify({'status': 'error', 'message': 'File not found'}), 404
|
||||||
|
|
||||||
|
try:
|
||||||
|
os.remove(file_path)
|
||||||
|
return jsonify({'status': 'success', 'message': f'File {file_name} deleted successfully'})
|
||||||
|
except Exception as e:
|
||||||
|
return jsonify({'status': 'error', 'message': f'Failed to delete file: {str(e)}'}), 500
|
||||||
|
|
||||||
|
@app.route('/upload', methods=['GET', 'POST'])
|
||||||
|
def upload_file():
|
||||||
|
if request.method == 'POST':
|
||||||
|
# 检查是否上传了文件
|
||||||
|
if 'file' not in request.files:
|
||||||
|
return jsonify({'status': 'error', 'message': 'No file part'}), 400
|
||||||
|
|
||||||
|
file = request.files['file']
|
||||||
|
if file.filename == '':
|
||||||
|
return jsonify({'status': 'error', 'message': 'No selected file'}), 400
|
||||||
|
|
||||||
|
# 获取用户选择的上传路径，默认为 DEFAULT_UPLOAD_FOLDER
|
||||||
|
upload_path = request.form.get('uploadPath', DEFAULT_UPLOAD_FOLDER)
|
||||||
|
|
||||||
|
# 检查路径是否合法
|
||||||
|
allowed_paths = ['/mnt/sese', '/mnt/self', '/mnt/temp', '/Users/zgz/Documents/images', '/Users/zgz/Documents/images/share']
|
||||||
|
if upload_path not in allowed_paths:
|
||||||
|
return jsonify({'status': 'error', 'message': 'Invalid upload path'}), 400
|
||||||
|
|
||||||
|
# 检查文件类型并保存
|
||||||
|
if file and allowed_file(file.filename):
|
||||||
|
save_dir = os.path.abspath(upload_path)
|
||||||
|
if not os.path.exists(save_dir):
|
||||||
|
os.makedirs(save_dir)
|
||||||
|
|
||||||
|
filepath = os.path.join(save_dir, file.filename)
|
||||||
|
file.save(filepath)
|
||||||
|
|
||||||
|
uploaded_files = list_files(save_dir) # 列举上传路径中的文件
|
||||||
|
return jsonify({'status': 'success', 'message': f'File uploaded to {filepath}',
|
||||||
|
'files': uploaded_files}), 200
|
||||||
|
|
||||||
|
return jsonify({'status': 'error', 'message': 'File type not allowed'}), 400
|
||||||
|
|
||||||
|
# GET 请求返回 HTML 页面
|
||||||
|
files = list_files(DEFAULT_UPLOAD_FOLDER)
|
||||||
|
return render_template('index.html', files=files[:10], total_files=len(files))
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/files', methods=['GET'])
|
||||||
|
def get_files():
|
||||||
|
# 获取当前选择的路径，默认路径为 DEFAULT_UPLOAD_FOLDER
|
||||||
|
upload_path = request.args.get('path', DEFAULT_UPLOAD_FOLDER)
|
||||||
|
|
||||||
|
# 获取该路径下的文件列表
|
||||||
|
files = list_files(upload_path)
|
||||||
|
return jsonify(files=files)
|
||||||
|
|
||||||
|
@app.route('/static/<path:filename>')
|
||||||
|
def serve_dynamic_static(filename):
|
||||||
|
directory = request.args.get('path', '/mnt/sese')
|
||||||
|
full_path = os.path.join(directory, filename)
|
||||||
|
print(f"Serving file from directory: {directory}, file: {filename}")
|
||||||
|
print(f"Full path: {full_path}")
|
||||||
|
try:
|
||||||
|
return send_from_directory(directory, filename)
|
||||||
|
except FileNotFoundError:
|
||||||
|
return jsonify({"error": "File not found", "directory": directory, "filename": filename}), 404
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
if not os.path.exists(DEFAULT_UPLOAD_FOLDER):
|
||||||
|
os.makedirs(DEFAULT_UPLOAD_FOLDER)
|
||||||
|
app.run(host='0.0.0.0', port=8066)
|
||||||
@ -0,0 +1,301 @@
|
|||||||
|
<!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(document.getElementById('uploadForm'));
|
||||||
|
|
||||||
|
// 获取选择的上传路径
|
||||||
|
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', '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/temp">/mnt/temp</option>
|
||||||
|
<!---->
|
||||||
|
<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" name="file" required>
|
||||||
|
<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>
|
||||||
Binary file not shown.
@ -0,0 +1,123 @@
|
|||||||
|
from flask import Flask, request, jsonify, render_template, send_from_directory
|
||||||
|
import os
|
||||||
|
|
||||||
|
# 默认配置
|
||||||
|
#DEFAULT_UPLOAD_FOLDER = "/Users/zgz/Documents/images"
|
||||||
|
DEFAULT_UPLOAD_FOLDER = "/mnt/sssss"
|
||||||
|
|
||||||
|
ALLOWED_EXTENSIONS = {
|
||||||
|
'png', 'jpg', 'jpeg', 'gif', 'bmp', 'tiff', 'webp','heic', # 图片类型
|
||||||
|
'mp4', 'mov', 'wmv', 'avi', 'm4v', 'mpg', 'mpeg', 'flv', 'mkv', '3gp', 'webm' # 视频类型
|
||||||
|
}
|
||||||
|
MAX_FILE_SIZE = 888 * 1024 * 1024 # 88MB
|
||||||
|
app = Flask(__name__, static_folder=None)
|
||||||
|
#app = Flask(__name__, static_folder=DEFAULT_UPLOAD_FOLDER, static_url_path="/files")
|
||||||
|
app.config['UPLOAD_FOLDER'] = DEFAULT_UPLOAD_FOLDER
|
||||||
|
app.config['MAX_CONTENT_LENGTH'] = MAX_FILE_SIZE
|
||||||
|
|
||||||
|
|
||||||
|
def allowed_file(filename):
|
||||||
|
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
|
||||||
|
|
||||||
|
|
||||||
|
def list_files(directory):
|
||||||
|
"""列出指定目录下的所有文件并按时间排序"""
|
||||||
|
if not os.path.exists(directory):
|
||||||
|
return []
|
||||||
|
files = []
|
||||||
|
for root, _, filenames in os.walk(directory):
|
||||||
|
for filename in filenames:
|
||||||
|
files.append(os.path.relpath(os.path.join(root, filename), directory))
|
||||||
|
files.sort(key=lambda x: os.path.getmtime(os.path.join(directory, x)), reverse=True) # 按时间降序排序
|
||||||
|
return files
|
||||||
|
|
||||||
|
@app.route('/delete', methods=['DELETE'])
|
||||||
|
def delete_file():
|
||||||
|
# 获取当前选择的路径，默认路径为 DEFAULT_UPLOAD_FOLDER
|
||||||
|
upload_path = request.args.get('path', DEFAULT_UPLOAD_FOLDER)
|
||||||
|
|
||||||
|
file_name = request.args.get('file')
|
||||||
|
if not file_name:
|
||||||
|
return jsonify({'status': 'error', 'message': 'File name is required'}), 400
|
||||||
|
|
||||||
|
file_path = os.path.join(upload_path, file_name)
|
||||||
|
if not os.path.exists(file_path):
|
||||||
|
return jsonify({'status': 'error', 'message': 'File not found'}), 404
|
||||||
|
|
||||||
|
try:
|
||||||
|
os.remove(file_path)
|
||||||
|
return jsonify({'status': 'success', 'message': f'File {file_name} deleted successfully'})
|
||||||
|
except Exception as e:
|
||||||
|
return jsonify({'status': 'error', 'message': f'Failed to delete file: {str(e)}'}), 500
|
||||||
|
|
||||||
|
@app.route('/upload', methods=['GET', 'POST'])
|
||||||
|
def upload_file():
|
||||||
|
if request.method == 'POST':
|
||||||
|
# 检查是否上传了文件
|
||||||
|
if 'files' not in request.files:
|
||||||
|
return jsonify({'status': 'error', 'message': 'No files part'}), 400
|
||||||
|
|
||||||
|
files = request.files.getlist('files') # 获取多个文件
|
||||||
|
if not files or all(file.filename == '' for file in files):
|
||||||
|
return jsonify({'status': 'error', 'message': 'No selected files'}), 400
|
||||||
|
|
||||||
|
# 获取用户选择的上传路径，默认为 DEFAULT_UPLOAD_FOLDER
|
||||||
|
upload_path = request.form.get('uploadPath', DEFAULT_UPLOAD_FOLDER)
|
||||||
|
|
||||||
|
# 检查路径是否合法
|
||||||
|
allowed_paths = [
|
||||||
|
'/mnt/sssss',
|
||||||
|
]
|
||||||
|
if upload_path not in allowed_paths:
|
||||||
|
return jsonify({'status': 'error', 'message': 'Invalid upload path'}), 400
|
||||||
|
|
||||||
|
save_dir = os.path.abspath(upload_path)
|
||||||
|
if not os.path.exists(save_dir):
|
||||||
|
os.makedirs(save_dir)
|
||||||
|
|
||||||
|
# 检查文件类型并逐一保存
|
||||||
|
uploaded_files = []
|
||||||
|
for file in files:
|
||||||
|
if file and allowed_file(file.filename):
|
||||||
|
filepath = os.path.join(save_dir, file.filename)
|
||||||
|
file.save(filepath)
|
||||||
|
uploaded_files.append(file.filename)
|
||||||
|
|
||||||
|
# 列举上传路径中的文件
|
||||||
|
current_files = list_files(save_dir)
|
||||||
|
if uploaded_files:
|
||||||
|
return jsonify({
|
||||||
|
'status': 'success',
|
||||||
|
'message': f'Uploaded files: {", ".join(uploaded_files)}',
|
||||||
|
'files': current_files,
|
||||||
|
}), 200
|
||||||
|
return jsonify({'status': 'error', 'message': 'No valid files to upload'}), 400
|
||||||
|
|
||||||
|
# GET 请求返回 HTML 页面
|
||||||
|
files = list_files(DEFAULT_UPLOAD_FOLDER)
|
||||||
|
return render_template('index.html', files=files[:10], total_files=len(files))
|
||||||
|
|
||||||
|
@app.route('/files', methods=['GET'])
|
||||||
|
def get_files():
|
||||||
|
# 获取当前选择的路径，默认路径为 DEFAULT_UPLOAD_FOLDER
|
||||||
|
upload_path = request.args.get('path', DEFAULT_UPLOAD_FOLDER)
|
||||||
|
|
||||||
|
# 获取该路径下的文件列表
|
||||||
|
files = list_files(upload_path)
|
||||||
|
return jsonify(files=files)
|
||||||
|
|
||||||
|
@app.route('/static/<path:filename>')
|
||||||
|
def serve_dynamic_static(filename):
|
||||||
|
directory = request.args.get('path', '/mnt/sssss')
|
||||||
|
full_path = os.path.join(directory, filename)
|
||||||
|
print(f"Serving file from directory: {directory}, file: {filename}")
|
||||||
|
print(f"Full path: {full_path}")
|
||||||
|
try:
|
||||||
|
return send_from_directory(directory, filename)
|
||||||
|
except FileNotFoundError:
|
||||||
|
return jsonify({"error": "File not found", "directory": directory, "filename": filename}), 404
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
if not os.path.exists(DEFAULT_UPLOAD_FOLDER):
|
||||||
|
os.makedirs(DEFAULT_UPLOAD_FOLDER)
|
||||||
|
app.run(host='0.0.0.0', port=8207)
|
||||||
@ -0,0 +1,323 @@
|
|||||||
|
<!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>
|
||||||
@ -0,0 +1,323 @@
|
|||||||
|
<!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', '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>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
[uwsgi]
|
||||||
|
uid = uwsgi
|
||||||
|
gid = uwsgi
|
||||||
|
|
||||||
|
chdir = /opt/service/python_prj/fileUpload2/upload/ver3
|
||||||
|
|
||||||
|
# 启动服务监听的地址和端口
|
||||||
|
http-socket = 0.0.0.0:8207
|
||||||
|
|
||||||
|
# 指定虚拟环境路径
|
||||||
|
virtualenv = /opt/service/python_prj/pictoHub.env
|
||||||
|
|
||||||
|
# 指定 Flask 应用文件的路径
|
||||||
|
wsgi-file = /opt/service/python_prj/fileUpload2/upload/ver3/app.py
|
||||||
|
|
||||||
|
# 设置 Flask 的应用实例
|
||||||
|
callable = app
|
||||||
|
|
||||||
|
# 设置静态文件目录映射
|
||||||
|
static-map = /static=/opt/service/python_prj/fileUpload2/upload/ver3/static
|
||||||
|
|
||||||
|
# 日志文件
|
||||||
|
logto = /var/log/uwsgi/uwsgi.log
|
||||||
|
|
||||||
|
# 设置进程数
|
||||||
|
processes = 4
|
||||||
|
|
||||||
|
# 启动时的 Python 环境路径
|
||||||
|
home = /opt/service/python_prj/pictoHub.env
|
||||||
|
|
||||||
|
# 确保应用正常启动
|
||||||
|
touch-reload = /opt/service/python_prj/fileUpload2/upload/ver3/app.py
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
*** Starting uWSGI 2.0.28 (64bit) on [Mon Jan 13 14:30:26 2025] ***
|
||||||
|
compiled with version: 9.4.0 on 13 January 2025 03:35:46
|
||||||
|
os: Linux-5.15.0-1070-oracle #76~20.04.1-Ubuntu SMP Wed Oct 9 14:35:51 UTC 2024
|
||||||
|
nodename: 24-11-18-2234
|
||||||
|
machine: aarch64
|
||||||
|
clock source: unix
|
||||||
|
detected number of CPU cores: 2
|
||||||
|
current working directory: /opt/service/python_prj/fileUpload/upload/ver3
|
||||||
|
detected binary path: /opt/service/python_prj/pictoHub.env/bin/uwsgi
|
||||||
|
!!! no internal routing support, rebuild with pcre support !!!
|
||||||
|
uWSGI running as root, you can use --uid/--gid/--chroot options
|
||||||
|
*** WARNING: you are running uWSGI as root !!! (use the --uid flag) ***
|
||||||
|
chdir() to /opt/service/python_prj/fileUpload/upload/ver3 # 应用的工作目录
|
||||||
|
chdir(): No such file or directory [core/uwsgi.c line 2617]
|
||||||
|
*** Starting uWSGI 2.0.28 (64bit) on [Mon Jan 13 14:37:07 2025] ***
|
||||||
|
compiled with version: 9.4.0 on 13 January 2025 03:35:46
|
||||||
|
os: Linux-5.15.0-1070-oracle #76~20.04.1-Ubuntu SMP Wed Oct 9 14:35:51 UTC 2024
|
||||||
|
nodename: 24-11-18-2234
|
||||||
|
machine: aarch64
|
||||||
|
clock source: unix
|
||||||
|
detected number of CPU cores: 2
|
||||||
|
current working directory: /opt/service/python_prj/fileUpload/upload/ver3
|
||||||
|
detected binary path: /opt/service/python_prj/pictoHub.env/bin/uwsgi
|
||||||
|
!!! no internal routing support, rebuild with pcre support !!!
|
||||||
|
uWSGI running as root, you can use --uid/--gid/--chroot options
|
||||||
|
*** WARNING: you are running uWSGI as root !!! (use the --uid flag) ***
|
||||||
|
chdir() to /opt/service/python_prj/fileUpload/upload/ver3 # 应用的工作目录
|
||||||
|
chdir(): No such file or directory [core/uwsgi.c line 2617]
|
||||||
|
*** Starting uWSGI 2.0.28 (64bit) on [Mon Jan 13 14:40:44 2025] ***
|
||||||
|
compiled with version: 9.4.0 on 13 January 2025 03:35:46
|
||||||
|
os: Linux-5.15.0-1070-oracle #76~20.04.1-Ubuntu SMP Wed Oct 9 14:35:51 UTC 2024
|
||||||
|
nodename: 24-11-18-2234
|
||||||
|
machine: aarch64
|
||||||
|
clock source: unix
|
||||||
|
detected number of CPU cores: 2
|
||||||
|
current working directory: /opt/service/python_prj/fileUpload/upload/ver3
|
||||||
|
detected binary path: /opt/service/python_prj/pictoHub.env/bin/uwsgi
|
||||||
|
!!! no internal routing support, rebuild with pcre support !!!
|
||||||
|
uWSGI running as root, you can use --uid/--gid/--chroot options
|
||||||
|
*** WARNING: you are running uWSGI as root !!! (use the --uid flag) ***
|
||||||
|
chdir() to /opt/service/python_prj/fileUpload/upload/ver3 # 应用的工作目录
|
||||||
|
chdir(): No such file or directory [core/uwsgi.c line 2617]
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
from flask import Flask, request, jsonify
|
||||||
|
import os
|
||||||
|
|
||||||
|
# 配置上传目录和文件限制
|
||||||
|
UPLOAD_FOLDER = '/mnt/sese'
|
||||||
|
ALLOWED_EXTENSIONS = {
|
||||||
|
'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'md', 'doc', 'docx','mp4','mov','wmv','avi','m4v','mpg',
|
||||||
|
'xlsx', 'xls', 'rar', 'zip', 'java', 'sql', 'py', 'css','conf','sql','properties','yaml','html','htm','jsp','js','json','yml'
|
||||||
|
}
|
||||||
|
MAX_FILE_SIZE = 88 * 1024 * 1024 # 88MB
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
|
||||||
|
app.config['MAX_CONTENT_LENGTH'] = MAX_FILE_SIZE
|
||||||
|
|
||||||
|
|
||||||
|
def allowed_file(filename):
|
||||||
|
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/upload', methods=['GET', 'POST'])
|
||||||
|
def upload_file():
|
||||||
|
if request.method == 'POST':
|
||||||
|
if 'file' not in request.files:
|
||||||
|
return jsonify({'status': 'error', 'message': 'No file part'}), 400
|
||||||
|
file = request.files['file']
|
||||||
|
if file.filename == '':
|
||||||
|
return jsonify({'status': 'error', 'message': 'No selected file'}), 400
|
||||||
|
if file and allowed_file(file.filename):
|
||||||
|
filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
|
||||||
|
file.save(filepath)
|
||||||
|
return jsonify({'status': 'success', 'message': 'File uploaded successfully'}), 200
|
||||||
|
return jsonify({'status': 'error', 'message': 'File type not allowed'}), 400
|
||||||
|
|
||||||
|
# GET 请求返回 HTML 页面
|
||||||
|
files = os.listdir(app.config['UPLOAD_FOLDER'])
|
||||||
|
files_list_html = ''.join(
|
||||||
|
f'<li><a href="/temp/{file}" target="_blank">{file}</a></li>'
|
||||||
|
for file in files
|
||||||
|
)
|
||||||
|
html_template = f"""
|
||||||
|
<!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>
|
||||||
|
<script>
|
||||||
|
function uploadFile(event) {{
|
||||||
|
event.preventDefault();
|
||||||
|
const formData = new FormData(document.getElementById('uploadForm'));
|
||||||
|
const uploadButton = document.getElementById('uploadButton');
|
||||||
|
const progressIndicator = document.getElementById('progressIndicator');
|
||||||
|
const messageBox = document.getElementById('messageBox');
|
||||||
|
|
||||||
|
// 禁用按钮，显示上传中提示
|
||||||
|
uploadButton.disabled = true;
|
||||||
|
progressIndicator.style.display = 'inline-block';
|
||||||
|
|
||||||
|
fetch('/upload', {{
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
}})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {{
|
||||||
|
progressIndicator.style.display = 'none'; // 隐藏进度指示
|
||||||
|
uploadButton.disabled = false; // 启用按钮
|
||||||
|
if (data.status === 'success') {{
|
||||||
|
messageBox.innerHTML = '<p style="color:green;">' + data.message + '</p>';
|
||||||
|
location.reload(); // 刷新页面更新文件列表
|
||||||
|
}} 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>';
|
||||||
|
}});
|
||||||
|
}}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Upload a file</h1>
|
||||||
|
<form id="uploadForm" onsubmit="uploadFile(event)">
|
||||||
|
<input type="file" name="file" required>
|
||||||
|
<button id="uploadButton" type="submit">Upload</button>
|
||||||
|
<span id="progressIndicator" style="display:none;">Uploading...</span>
|
||||||
|
</form>
|
||||||
|
<div id="messageBox"></div>
|
||||||
|
<h2>Uploaded list(注意：每日零晨清空列表):</h2>
|
||||||
|
<ul>
|
||||||
|
{files_list_html}
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
"""
|
||||||
|
return html_template
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
if not os.path.exists(UPLOAD_FOLDER):
|
||||||
|
os.makedirs(UPLOAD_FOLDER)
|
||||||
|
app.run(host='0.0.0.0', port=8066)
|
||||||
Loading…
Reference in new issue