<!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: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
        .drop-zone { border: 2px dashed #ccc; padding: 40px; text-align: center; border-radius: 8px; cursor: pointer; transition: 0.3s; }
        .drop-zone:hover, .drop-zone.drag { border-color: #4f46e5; background: #f8fafc; }
        #preview { margin-top: 20px; display: none; }
        #preview img { max-width: 100%; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        #url-box { margin-top: 10px; padding: 10px; background: #f1f5f9; border-radius: 6px; word-break: break-all; font-family: monospace; display: none; }
        .btn { padding: 8px 16px; background: #4f46e5; color: white; border: none; border-radius: 6px; cursor: pointer; margin-top: 10px; }
        .btn:hover { background: #4338ca; }
        .error { color: #dc2626; margin-top: 10px; display: none; white-space: pre-wrap; background: #fee2e2; padding: 8px; border-radius: 6px; }
    </style>
</head>
<body>
    <h2>📤 上传你的图片</h2>
    <div class="drop-zone" id="dropZone">点击或拖拽图片到此处</div>
    <input type="file" id="fileInput" name="image" accept="image/*" hidden>
    
    <div id="error" class="error"></div>
    <div id="preview"><img id="imgPreview" src=""></div>
    <div id="url-box"></div>
    <button class="btn" id="copyBtn" style="display:none;" onclick="copyUrl()">📋 复制链接</button>

    <script>
        const dropZone = document.getElementById('dropZone');
        const fileInput = document.getElementById('fileInput');
        const errorBox = document.getElementById('error');
        const preview = document.getElementById('preview');
        const imgPreview = document.getElementById('imgPreview');
        const urlBox = document.getElementById('url-box');
        const copyBtn = document.getElementById('copyBtn');

        dropZone.addEventListener('click', () => fileInput.click());
        dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag'); });
        dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag'));
        dropZone.addEventListener('drop', e => {
            e.preventDefault(); dropZone.classList.remove('drag');
            if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]);
        });
        fileInput.addEventListener('change', () => { if (fileInput.files.length) handleFile(fileInput.files[0]); });

        function handleFile(file) {
            errorBox.style.display = 'none';
            preview.style.display = 'none';
            urlBox.style.display = 'none';
            copyBtn.style.display = 'none';

            const formData = new FormData();
            formData.append('image', file);

            const xhr = new XMLHttpRequest();
            xhr.open('POST', '', true);
            xhr.onload = () => {
                try {
                    const res = JSON.parse(xhr.responseText);
                    if (res.code === 1) {
                        imgPreview.src = res.url;
                        preview.style.display = 'block';
                        urlBox.textContent = res.url;
                        urlBox.style.display = 'block';
                        copyBtn.style.display = 'inline-block';
                    } else {
                        errorBox.textContent = '❌ ' + res.msg;
                        errorBox.style.display = 'block';
                    }
                } catch (e) {
                    // 显示原始响应，方便你定位真实报错
                    errorBox.textContent = '⚠️ 服务器返回非 JSON 内容：\n' + xhr.responseText.trim();
                    errorBox.style.display = 'block';
                }
            };
            xhr.onerror = () => {
                errorBox.textContent = '❌ 网络请求失败，请检查服务器状态';
                errorBox.style.display = 'block';
            };
            xhr.send(formData);
        }

        function copyUrl() {
            navigator.clipboard.writeText(urlBox.textContent).then(() => alert('已复制到剪贴板'));
        }
    </script>
</body>
</html>