|
|
@@ -54,6 +54,9 @@ func (s *Server) handleFileBrowser(w http.ResponseWriter, r *http.Request) {
|
|
|
return
|
|
|
}
|
|
|
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
|
|
+ w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
|
|
|
+ w.Header().Set("Pragma", "no-cache")
|
|
|
+ w.Header().Set("Expires", "0")
|
|
|
w.Write([]byte(fileBrowserHTML))
|
|
|
}
|
|
|
|
|
|
@@ -158,8 +161,6 @@ const fileBrowserHTML = `<!DOCTYPE html>
|
|
|
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102,126,234,0.4); }
|
|
|
.btn-success { background: #28a745; color: white; }
|
|
|
.btn-success:hover { background: #218838; }
|
|
|
- .btn-danger { background: #dc3545; color: white; }
|
|
|
- .btn-danger:hover { background: #c82333; }
|
|
|
.btn-sm { padding: 6px 12px; font-size: 12px; }
|
|
|
.file-list { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
|
|
|
table { width: 100%; border-collapse: collapse; }
|
|
|
@@ -177,24 +178,6 @@ const fileBrowserHTML = `<!DOCTYPE html>
|
|
|
.file-link { color: #667eea; text-decoration: none; font-weight: 500; }
|
|
|
.file-link:hover { text-decoration: underline; }
|
|
|
.actions-cell { display: flex; gap: 8px; }
|
|
|
- .toast { position: fixed; top: 80px; right: 30px; padding: 14px 24px; border-radius: 8px; color: white; font-size: 14px; font-weight: 500; z-index: 2000; animation: slideIn 0.3s ease; }
|
|
|
- .toast-success { background: #28a745; }
|
|
|
- .toast-error { background: #dc3545; }
|
|
|
- @keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
|
|
- .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center; }
|
|
|
- .modal-overlay.show { display: flex; }
|
|
|
- .modal { background: white; border-radius: 12px; padding: 30px; width: 480px; max-width: 90%; }
|
|
|
- .modal h2 { margin-bottom: 24px; font-size: 20px; }
|
|
|
- .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
|
|
|
- .form-group { margin-bottom: 16px; }
|
|
|
- .form-group label { display: block; margin-bottom: 6px; font-weight: 600; color: #555; font-size: 14px; }
|
|
|
- .form-group input { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
|
|
|
- .form-group input:focus { outline: none; border-color: #667eea; }
|
|
|
- .drop-zone { border: 2px dashed #667eea; border-radius: 8px; padding: 40px 20px; text-align: center; background: #f8f9ff; transition: all 0.3s; cursor: pointer; margin-bottom: 16px; }
|
|
|
- .drop-zone:hover, .drop-zone.dragover { background: #e8ebff; border-color: #764ba2; }
|
|
|
- .progress-bar { width: 100%; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; margin-top: 12px; display: none; }
|
|
|
- .progress-bar.show { display: block; }
|
|
|
- .progress-fill { height: 100%; background: linear-gradient(135deg, #667eea, #764ba2); transition: width 0.3s; width: 0%; }
|
|
|
.empty-state { text-align: center; padding: 60px 20px; color: #999; }
|
|
|
.empty-state .icon { font-size: 64px; margin-bottom: 16px; }
|
|
|
</style>
|
|
|
@@ -202,17 +185,14 @@ const fileBrowserHTML = `<!DOCTYPE html>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<div class="header">
|
|
|
- <h1>📁 HTTP 文件服务器</h1>
|
|
|
+ <h1>HTTP 文件服务器</h1>
|
|
|
<p>在线浏览、下载文件</p>
|
|
|
</div>
|
|
|
|
|
|
- <div class="breadcrumb" id="breadcrumb">
|
|
|
- </div>
|
|
|
+ <div class="breadcrumb" id="breadcrumb"></div>
|
|
|
|
|
|
<div class="actions">
|
|
|
- <button class="btn btn-primary" onclick="refresh()">
|
|
|
- 🔄 刷新
|
|
|
- </button>
|
|
|
+ <button class="btn btn-primary" onclick="refresh()">刷新</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="file-list">
|
|
|
@@ -220,8 +200,7 @@ const fileBrowserHTML = `<!DOCTYPE html>
|
|
|
<thead>
|
|
|
<tr><th>名称</th><th>大小</th><th>修改时间</th><th>操作</th></tr>
|
|
|
</thead>
|
|
|
- <tbody id="fileTableBody">
|
|
|
- </tbody>
|
|
|
+ <tbody id="fileTableBody"></tbody>
|
|
|
</table>
|
|
|
<div class="empty-state" id="emptyState" style="display:none">
|
|
|
<div class="icon">📁</div>
|
|
|
@@ -231,7 +210,7 @@ const fileBrowserHTML = `<!DOCTYPE html>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
-let currentPath = '/';
|
|
|
+var currentPath = '/';
|
|
|
|
|
|
function init() {
|
|
|
loadFiles();
|
|
|
@@ -239,9 +218,9 @@ function init() {
|
|
|
|
|
|
function loadFiles() {
|
|
|
fetch('/api/list?path=' + encodeURIComponent(currentPath))
|
|
|
- .then(r => r.json())
|
|
|
- .then(data => {
|
|
|
- const tbody = document.getElementById('fileTableBody');
|
|
|
+ .then(function(r) { return r.json(); })
|
|
|
+ .then(function(data) {
|
|
|
+ var tbody = document.getElementById('fileTableBody');
|
|
|
tbody.innerHTML = '';
|
|
|
|
|
|
if (!data.files || data.files.length === 0) {
|
|
|
@@ -253,16 +232,59 @@ function loadFiles() {
|
|
|
document.getElementById('emptyState').style.display = 'none';
|
|
|
document.getElementById('fileTable').style.display = 'table';
|
|
|
|
|
|
- data.files.forEach(f => {
|
|
|
- const tr = document.createElement('tr');
|
|
|
- const icon = f.isDir ? '📁' : getFileIcon(f.name);
|
|
|
- const iconClass = f.isDir ? 'folder-icon' : 'file-icon-' + getFileType(f.name);
|
|
|
-
|
|
|
- tr.innerHTML = '<td><div class="file-name"><div class="file-icon ' + iconClass + '">' + icon + '</div>' +
|
|
|
- (f.isDir ? '<a class="file-link" href="#" onclick="enterFolder(\\'' + escapeStr(f.name) + '\\');return false;">' + f.name + '</a>' : '<span>' + f.name + '</span>') +
|
|
|
- '</div></td><td>' + (f.isDir ? '-' : f.size) + '</td><td>' + f.modTime + '</td><td class="actions-cell">' +
|
|
|
- (f.isDir ? '<button class="btn btn-sm btn-primary" onclick="enterFolder(\\'' + escapeStr(f.name) + '\\')">打开</button>' : '<a href="/api/download?file=' + encodeURIComponent(currentPath + f.name) + '" class="btn btn-sm btn-success">下载</a>') +
|
|
|
- '</td></tr>';
|
|
|
+ data.files.forEach(function(f) {
|
|
|
+ var tr = document.createElement('tr');
|
|
|
+
|
|
|
+ var nameTd = document.createElement('td');
|
|
|
+ var nameDiv = document.createElement('div');
|
|
|
+ nameDiv.className = 'file-name';
|
|
|
+ var iconDiv = document.createElement('div');
|
|
|
+ var icon = f.isDir ? '📁' : getFileIcon(f.name);
|
|
|
+ var iconClass = f.isDir ? 'folder-icon' : 'file-icon-' + getFileType(f.name);
|
|
|
+ iconDiv.className = 'file-icon ' + iconClass;
|
|
|
+ iconDiv.innerHTML = icon;
|
|
|
+ nameDiv.appendChild(iconDiv);
|
|
|
+
|
|
|
+ if (f.isDir) {
|
|
|
+ var link = document.createElement('a');
|
|
|
+ link.className = 'file-link';
|
|
|
+ link.href = '#';
|
|
|
+ link.textContent = f.name;
|
|
|
+ link.onclick = function() { enterFolder(f.name); return false; };
|
|
|
+ nameDiv.appendChild(link);
|
|
|
+ } else {
|
|
|
+ var span = document.createElement('span');
|
|
|
+ span.textContent = f.name;
|
|
|
+ nameDiv.appendChild(span);
|
|
|
+ }
|
|
|
+ nameTd.appendChild(nameDiv);
|
|
|
+
|
|
|
+ var sizeTd = document.createElement('td');
|
|
|
+ sizeTd.textContent = f.isDir ? '-' : f.size;
|
|
|
+
|
|
|
+ var timeTd = document.createElement('td');
|
|
|
+ timeTd.textContent = f.modTime;
|
|
|
+
|
|
|
+ var actionTd = document.createElement('td');
|
|
|
+ actionTd.className = 'actions-cell';
|
|
|
+ if (f.isDir) {
|
|
|
+ var btn = document.createElement('button');
|
|
|
+ btn.className = 'btn btn-sm btn-primary';
|
|
|
+ btn.textContent = '打开';
|
|
|
+ btn.onclick = function() { enterFolder(f.name); };
|
|
|
+ actionTd.appendChild(btn);
|
|
|
+ } else {
|
|
|
+ var link = document.createElement('a');
|
|
|
+ link.className = 'btn btn-sm btn-success';
|
|
|
+ link.href = '/api/download?file=' + encodeURIComponent(currentPath + f.name);
|
|
|
+ link.textContent = '下载';
|
|
|
+ actionTd.appendChild(link);
|
|
|
+ }
|
|
|
+
|
|
|
+ tr.appendChild(nameTd);
|
|
|
+ tr.appendChild(sizeTd);
|
|
|
+ tr.appendChild(timeTd);
|
|
|
+ tr.appendChild(actionTd);
|
|
|
tbody.appendChild(tr);
|
|
|
});
|
|
|
|
|
|
@@ -270,24 +292,20 @@ function loadFiles() {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
-function escapeStr(s) {
|
|
|
- return s.replace(/\\/g, '\\\\\\\\').replace(/'/g, "\\\\'");
|
|
|
-}
|
|
|
-
|
|
|
function enterFolder(name) {
|
|
|
currentPath = currentPath === '/' ? '/' + name + '/' : currentPath + name + '/';
|
|
|
loadFiles();
|
|
|
}
|
|
|
|
|
|
function updateBreadcrumb() {
|
|
|
- const bc = document.getElementById('breadcrumb');
|
|
|
+ var bc = document.getElementById('breadcrumb');
|
|
|
bc.innerHTML = '<a href="#" onclick="goTo(\'/\');return false;">根目录</a>';
|
|
|
|
|
|
- const parts = currentPath.split('/').filter(p => p);
|
|
|
- let path = '';
|
|
|
- parts.forEach(p => {
|
|
|
+ var parts = currentPath.split('/').filter(function(p) { return p; });
|
|
|
+ var path = '';
|
|
|
+ parts.forEach(function(p) {
|
|
|
path += p + '/';
|
|
|
- bc.innerHTML += '<span>/</span><a href="#" onclick="goTo(\\'' + path + '\\');return false;">' + p + '</a>';
|
|
|
+ bc.innerHTML += '<span>/</span><a href="#" onclick="goTo(\'' + path + '\');return false;">' + p + '</a>';
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -301,35 +319,27 @@ function refresh() {
|
|
|
}
|
|
|
|
|
|
function getFileIcon(name) {
|
|
|
- const ext = name.split('.').pop().toLowerCase();
|
|
|
- const icons = {
|
|
|
- 'doc': '📄', 'docx': '📄', 'pdf': '📄', 'txt': '📄',
|
|
|
- 'xls': '📊', 'xlsx': '📊', 'csv': '📊',
|
|
|
- 'jpg': '🖼️', 'jpeg': '🖼️', 'png': '🖼️', 'gif': '🖼️', 'bmp': '🖼️',
|
|
|
- 'mp3': '🎵', 'wav': '🎵', 'flac': '🎵',
|
|
|
- 'mp4': '🎬', 'avi': '🎬', 'mkv': '🎬', 'mov': '🎬',
|
|
|
- 'zip': '📦', 'rar': '📦', '7z': '📦', 'tar': '📦', 'gz': '📦',
|
|
|
- 'js': '💻', 'ts': '💻', 'py': '💻', 'go': '💻', 'java': '💻', 'c': '💻', 'cpp': '💻', 'html': '💻', 'css': '💻', 'json': '💻', 'xml': '💻', 'yml': '💻', 'yaml': '💻',
|
|
|
+ var ext = name.split('.').pop().toLowerCase();
|
|
|
+ var icons = {
|
|
|
+ 'doc': '📄', 'docx': '📄', 'pdf': '📄', 'txt': '📄',
|
|
|
+ 'xls': '📊', 'xlsx': '📊', 'csv': '📊',
|
|
|
+ 'jpg': '🌄', 'jpeg': '🌄', 'png': '🌄', 'gif': '🌄', 'bmp': '🌄',
|
|
|
+ 'mp3': '🎵', 'wav': '🎵', 'flac': '🎵',
|
|
|
+ 'mp4': '🎬', 'avi': '🎬', 'mkv': '🎬', 'mov': '🎬',
|
|
|
+ 'zip': '📦', 'rar': '📦', '7z': '📦', 'tar': '📦', 'gz': '📦',
|
|
|
+ 'js': '💻', 'ts': '💻', 'py': '💻', 'go': '💻', 'java': '💻', 'c': '💻', 'cpp': '💻', 'html': '💻', 'css': '💻', 'json': '💻', 'xml': '💻', 'yml': '💻', 'yaml': '💻'
|
|
|
};
|
|
|
- return icons[ext] || '📄';
|
|
|
+ return icons[ext] || '📄';
|
|
|
}
|
|
|
|
|
|
function getFileType(name) {
|
|
|
- const ext = name.split('.').pop().toLowerCase();
|
|
|
- if (['jpg','jpeg','png','gif','bmp','svg'].includes(ext)) return 'img';
|
|
|
- if (['zip','rar','7z','tar','gz'].includes(ext)) return 'zip';
|
|
|
- if (['js','ts','py','go','java','c','cpp','html','css','json','xml','yml','yaml'].includes(ext)) return 'code';
|
|
|
+ var ext = name.split('.').pop().toLowerCase();
|
|
|
+ if (['jpg','jpeg','png','gif','bmp','svg'].indexOf(ext) !== -1) return 'img';
|
|
|
+ if (['zip','rar','7z','tar','gz'].indexOf(ext) !== -1) return 'zip';
|
|
|
+ if (['js','ts','py','go','java','c','cpp','html','css','json','xml','yml','yaml'].indexOf(ext) !== -1) return 'code';
|
|
|
return 'doc';
|
|
|
}
|
|
|
|
|
|
-function showToast(msg, type) {
|
|
|
- const toast = document.createElement('div');
|
|
|
- toast.className = 'toast ' + (type === 'error' ? 'toast-error' : 'toast-success');
|
|
|
- toast.textContent = msg;
|
|
|
- document.body.appendChild(toast);
|
|
|
- setTimeout(() => toast.remove(), 3000);
|
|
|
-}
|
|
|
-
|
|
|
init();
|
|
|
</script>
|
|
|
</body>
|
Your Name