|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>HF-PicBed - Beautiful Image Upload</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
min-height: 100vh; |
|
|
margin: 0; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
padding: 20px; |
|
|
} |
|
|
.container { |
|
|
background-color: rgba(255, 255, 255, 0.9); |
|
|
border-radius: 10px; |
|
|
padding: 2rem; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
text-align: center; |
|
|
max-width: 500px; |
|
|
width: 100%; |
|
|
} |
|
|
h1 { |
|
|
color: #4a5568; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
#drop-area { |
|
|
border: 2px dashed #4a5568; |
|
|
border-radius: 10px; |
|
|
padding: 2rem; |
|
|
margin-bottom: 1rem; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
#drop-area:hover { |
|
|
background-color: rgba(74, 85, 104, 0.1); |
|
|
} |
|
|
#file-input { |
|
|
display: none; |
|
|
} |
|
|
#upload-btn { |
|
|
background-color: #4a5568; |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
#upload-btn:hover { |
|
|
background-color: #2d3748; |
|
|
} |
|
|
#result { |
|
|
margin-top: 1rem; |
|
|
word-break: break-all; |
|
|
} |
|
|
#preview { |
|
|
max-width: 100%; |
|
|
max-height: 300px; |
|
|
margin-top: 1rem; |
|
|
display: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>HF-PicBed</h1> |
|
|
<div id="drop-area"> |
|
|
<p>拖放图片到这里或点击选择文件</p> |
|
|
<input type="file" id="file-input" accept="image/*"> |
|
|
</div> |
|
|
<img id="preview" alt="Image preview" /> |
|
|
<button id="upload-btn" disabled>上传图片</button> |
|
|
<div id="result"></div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const dropArea = document.getElementById('drop-area'); |
|
|
const fileInput = document.getElementById('file-input'); |
|
|
const uploadBtn = document.getElementById('upload-btn'); |
|
|
const result = document.getElementById('result'); |
|
|
const preview = document.getElementById('preview'); |
|
|
|
|
|
dropArea.addEventListener('click', () => fileInput.click()); |
|
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
|
dropArea.addEventListener(eventName, preventDefaults, false); |
|
|
}); |
|
|
|
|
|
function preventDefaults(e) { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
|
dropArea.addEventListener(eventName, highlight, false); |
|
|
}); |
|
|
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
|
dropArea.addEventListener(eventName, unhighlight, false); |
|
|
}); |
|
|
|
|
|
function highlight() { |
|
|
dropArea.style.backgroundColor = 'rgba(74, 85, 104, 0.1)'; |
|
|
} |
|
|
|
|
|
function unhighlight() { |
|
|
dropArea.style.backgroundColor = 'transparent'; |
|
|
} |
|
|
|
|
|
dropArea.addEventListener('drop', handleDrop, false); |
|
|
|
|
|
function handleDrop(e) { |
|
|
const dt = e.dataTransfer; |
|
|
const files = dt.files; |
|
|
handleFiles(files); |
|
|
} |
|
|
|
|
|
fileInput.addEventListener('change', function() { |
|
|
handleFiles(this.files); |
|
|
}); |
|
|
|
|
|
function handleFiles(files) { |
|
|
if (files.length > 0) { |
|
|
const file = files[0]; |
|
|
previewFile(file); |
|
|
uploadBtn.disabled = false; |
|
|
} |
|
|
} |
|
|
|
|
|
function previewFile(file) { |
|
|
const reader = new FileReader(); |
|
|
reader.readAsDataURL(file); |
|
|
reader.onloadend = function() { |
|
|
preview.src = reader.result; |
|
|
preview.style.display = 'block'; |
|
|
} |
|
|
} |
|
|
|
|
|
uploadBtn.addEventListener('click', uploadFile); |
|
|
|
|
|
function uploadFile() { |
|
|
const file = fileInput.files[0]; |
|
|
if (!file) { |
|
|
alert('请选择一个文件'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('source', file); |
|
|
|
|
|
uploadBtn.disabled = true; |
|
|
uploadBtn.textContent = '上传中...'; |
|
|
|
|
|
fetch('/api/1/upload', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}) |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
if (data.status_code === 200) { |
|
|
result.innerHTML = `<p>上传成功！</p><a href="${data.image.url}" target="_blank">查看图片</a>`; |
|
|
} else { |
|
|
result.textContent = `上传失败: ${data.error.message}`; |
|
|
} |
|
|
}) |
|
|
.catch(error => { |
|
|
result.textContent = `上传出错: ${error.message}`; |
|
|
}) |
|
|
.finally(() => { |
|
|
uploadBtn.disabled = false; |
|
|
uploadBtn.textContent = '上传图片'; |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
