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