123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>绝对路径文件访问测试</title>
- <style>
- body {
- font-family: Arial, sans-serif;
- max-width: 900px;
- margin: 50px auto;
- padding: 20px;
- background-color: #f5f5f5;
- }
- .container {
- background-color: white;
- padding: 30px;
- border-radius: 8px;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
- }
- h1 {
- color: #333;
- text-align: center;
- margin-bottom: 30px;
- }
- .section {
- margin-bottom: 30px;
- padding: 20px;
- border: 1px solid #ddd;
- border-radius: 5px;
- }
- .section h3 {
- color: #555;
- margin-top: 0;
- }
- input[type="text"], input[type="file"] {
- width: 100%;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- margin-bottom: 10px;
- box-sizing: border-box;
- }
- button {
- padding: 8px 16px;
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- margin-right: 10px;
- margin-bottom: 10px;
- }
- button:hover {
- background-color: #0056b3;
- }
- button:disabled {
- background-color: #6c757d;
- cursor: not-allowed;
- }
- .example {
- background-color: #f8f9fa;
- padding: 15px;
- border-radius: 4px;
- margin: 10px 0;
- font-family: monospace;
- font-size: 14px;
- border-left: 4px solid #007bff;
- }
- .result {
- background-color: #d4edda;
- border: 1px solid #c3e6cb;
- padding: 15px;
- border-radius: 4px;
- margin-top: 10px;
- }
- .error {
- background-color: #f8d7da;
- border: 1px solid #f5c6cb;
- padding: 15px;
- border-radius: 4px;
- margin-top: 10px;
- }
- .info {
- background-color: #d1ecf1;
- border: 1px solid #bee5eb;
- padding: 15px;
- border-radius: 4px;
- margin-top: 10px;
- }
- .url-display {
- background-color: #f8f9fa;
- padding: 10px;
- border-radius: 4px;
- margin: 10px 0;
- font-family: monospace;
- font-size: 12px;
- word-break: break-all;
- border: 1px solid #dee2e6;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <h1>绝对路径文件访问测试</h1>
-
- <div class="section">
- <h3>配置说明</h3>
- <div class="info">
- <strong>当前配置:</strong><br>
- 文件存储路径:/home/siwei/uploadPath<br>
- 文件服务地址:http://127.0.0.1:9202<br><br>
-
- <strong>支持的访问方式:</strong><br>
- 方式1:http://127.0.0.1:9202/statics/相对路径<br>
- 方式2:http://127.0.0.1:9202/home/siwei/uploadPath/相对路径 (新增)
- </div>
- </div>
- <div class="section">
- <h3>1. 文件上传测试</h3>
- <p>先上传一个文件,获取完整路径用于测试</p>
- <input type="file" id="fileInput" accept="*/*">
- <button onclick="uploadFile()" id="uploadBtn">上传文件</button>
- <div id="uploadResult" style="display:none;"></div>
- </div>
- <div class="section">
- <h3>2. 绝对路径访问测试</h3>
- <p>输入完整的文件路径进行访问测试</p>
- <input type="text" id="absolutePath" placeholder="输入绝对路径,如:/home/siwei/uploadPath/2025/08/01/文件_20250801154318A001.zip">
- <button onclick="testAbsolutePath()">测试绝对路径访问</button>
- <button onclick="fillExamplePath()">填入示例路径</button>
- <div id="absoluteResult" style="display:none;"></div>
- </div>
- <div class="section">
- <h3>3. 路径对比测试</h3>
- <p>对比两种访问方式的效果</p>
- <input type="text" id="relativePath" placeholder="输入相对路径,如:2025/08/01/文件_20250801154318A001.zip">
- <button onclick="testBothPaths()">对比测试</button>
- <div id="compareResult" style="display:none;"></div>
- </div>
- <div class="section">
- <h3>示例路径</h3>
- <div class="example">
- <strong>假设文件路径:</strong><br>
- 完整路径:/home/siwei/uploadPath/2025/08/01/文件_20250801154318A001.zip<br><br>
-
- <strong>访问方式:</strong><br>
- 方式1:http://127.0.0.1:9202/statics/2025/08/01/文件_20250801154318A001.zip<br>
- 方式2:http://127.0.0.1:9202/home/siwei/uploadPath/2025/08/01/文件_20250801154318A001.zip
- </div>
- </div>
- </div>
- <script>
- function uploadFile() {
- const fileInput = document.getElementById('fileInput');
- const file = fileInput.files[0];
- const resultDiv = document.getElementById('uploadResult');
- const uploadBtn = document.getElementById('uploadBtn');
-
- if (!file) {
- alert('请选择文件');
- return;
- }
- const formData = new FormData();
- formData.append('file', file);
- uploadBtn.disabled = true;
- uploadBtn.textContent = '上传中...';
- resultDiv.style.display = 'block';
- resultDiv.innerHTML = '<div class="info">正在上传文件...</div>';
- fetch('http://127.0.0.1:9202/upload', {
- method: 'POST',
- body: formData
- })
- .then(response => response.json())
- .then(data => {
- uploadBtn.disabled = false;
- uploadBtn.textContent = '上传文件';
-
- if (data.code === 200) {
- const result = data.data;
- const absolutePath = result.path;
- const relativePath = absolutePath.replace('/home/siwei/uploadPath/', '');
-
- resultDiv.innerHTML = `
- <div class="result">
- <strong>✅ 上传成功!</strong><br>
- 文件名:${result.name}<br>
- 完整路径:${result.path}<br>
- 相对路径:${relativePath}<br><br>
-
- <strong>测试链接:</strong><br>
- <button onclick="window.open('http://127.0.0.1:9202/statics/${relativePath}', '_blank')">方式1:/statics 访问</button>
- <button onclick="window.open('http://127.0.0.1:9202${absolutePath}', '_blank')">方式2:绝对路径访问</button><br><br>
-
- <button onclick="document.getElementById('absolutePath').value='${absolutePath}'">填入绝对路径测试框</button>
- <button onclick="document.getElementById('relativePath').value='${relativePath}'">填入相对路径测试框</button>
- </div>
- `;
- } else {
- resultDiv.innerHTML = `<div class="error">❌ 上传失败:${data.msg}</div>`;
- }
- })
- .catch(error => {
- uploadBtn.disabled = false;
- uploadBtn.textContent = '上传文件';
- console.error('Error:', error);
- resultDiv.innerHTML = `<div class="error">❌ 上传异常:${error.message}</div>`;
- });
- }
- function testAbsolutePath() {
- const absolutePath = document.getElementById('absolutePath').value.trim();
- const resultDiv = document.getElementById('absoluteResult');
-
- if (!absolutePath) {
- alert('请输入绝对路径');
- return;
- }
-
- const testUrl = `http://127.0.0.1:9202${absolutePath}`;
-
- resultDiv.style.display = 'block';
- resultDiv.innerHTML = `
- <div class="info">
- <strong>测试URL:</strong><br>
- <div class="url-display">${testUrl}</div>
- <button onclick="window.open('${testUrl}', '_blank')">在新窗口打开</button>
- <button onclick="testUrlAccess('${testUrl}', 'absoluteResult')">测试访问状态</button>
- </div>
- `;
- }
- function testBothPaths() {
- const relativePath = document.getElementById('relativePath').value.trim();
- const resultDiv = document.getElementById('compareResult');
-
- if (!relativePath) {
- alert('请输入相对路径');
- return;
- }
-
- const staticUrl = `http://127.0.0.1:9202/statics/${relativePath}`;
- const absoluteUrl = `http://127.0.0.1:9202/home/siwei/uploadPath/${relativePath}`;
-
- resultDiv.style.display = 'block';
- resultDiv.innerHTML = `
- <div class="info">
- <strong>方式1 - /statics 前缀:</strong><br>
- <div class="url-display">${staticUrl}</div>
- <button onclick="window.open('${staticUrl}', '_blank')">打开</button>
- <button onclick="testUrlAccess('${staticUrl}', 'static-status')">测试</button>
- <span id="static-status"></span><br><br>
-
- <strong>方式2 - 绝对路径:</strong><br>
- <div class="url-display">${absoluteUrl}</div>
- <button onclick="window.open('${absoluteUrl}', '_blank')">打开</button>
- <button onclick="testUrlAccess('${absoluteUrl}', 'absolute-status')">测试</button>
- <span id="absolute-status"></span>
- </div>
- `;
- }
- function testUrlAccess(url, statusElementId) {
- const statusElement = document.getElementById(statusElementId);
- if (statusElement) {
- statusElement.innerHTML = ' 🔄 测试中...';
- }
-
- fetch(url, { method: 'HEAD' })
- .then(response => {
- if (statusElement) {
- if (response.ok) {
- statusElement.innerHTML = ' ✅ 可访问';
- statusElement.style.color = 'green';
- } else {
- statusElement.innerHTML = ` ❌ ${response.status}`;
- statusElement.style.color = 'red';
- }
- }
- })
- .catch(error => {
- if (statusElement) {
- statusElement.innerHTML = ' ❌ 网络错误';
- statusElement.style.color = 'red';
- }
- });
- }
- function fillExamplePath() {
- document.getElementById('absolutePath').value = '/home/siwei/uploadPath/2025/08/01/文件_20250801154318A001.zip';
- }
- </script>
- </body>
- </html>
|