80 lines
3.3 KiB
HTML
80 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-Hant">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>圓形鑰匙圈產生器</title>
|
|
</head>
|
|
<body>
|
|
<h1>圓形鑰匙圈產生器</h1>
|
|
<form id="uploadForm" enctype="multipart/form-data">
|
|
<input type="file" id="csvFile" name="csvFile" accept=".csv">
|
|
<!-- <button type="submit">生成圖片</button> -->
|
|
</form>
|
|
<div id="status"></div>
|
|
<div id="downloadLink" style="display: none;">
|
|
<a id="downloadAnchor" href="#" download="generated_image.png">點擊下載圖片</a>
|
|
</div>
|
|
<div>
|
|
<a href="/download_sample_csv" id="sampleCsvLink" download="sample.csv">下載範例 CSV 檔</a>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('uploadForm').addEventListener('submit', async function(event) {
|
|
event.preventDefault(); // 阻止表單預設提交行為
|
|
|
|
const fileInput = document.getElementById('csvFile');
|
|
const statusDiv = document.getElementById('status');
|
|
const downloadLinkDiv = document.getElementById('downloadLink');
|
|
const downloadAnchor = document.getElementById('downloadAnchor');
|
|
|
|
if (!fileInput.files.length) {
|
|
statusDiv.textContent = '請選擇一個 CSV 檔案。';
|
|
return;
|
|
}
|
|
|
|
statusDiv.textContent = '檔案上傳中，請稍候...';
|
|
downloadLinkDiv.style.display = 'none';
|
|
|
|
const formData = new FormData();
|
|
formData.append('csvFile', fileInput.files[0]);
|
|
|
|
// 產生日期時間字串
|
|
const now = new Date();
|
|
const pad = n => n.toString().padStart(2, '0');
|
|
const datetimeStr = `${now.getFullYear()}${pad(now.getMonth()+1)}${pad(now.getDate())}_${pad(now.getHours())}${pad(now.getMinutes())}`;
|
|
|
|
try {
|
|
const response = await fetch('/upload_csv', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorText = await response.text();
|
|
throw new Error(`伺服器錯誤: ${response.status} - ${errorText}`);
|
|
}
|
|
|
|
// 取得 zip blob 並建立下載連結
|
|
const zipBlob = await response.blob();
|
|
const zipUrl = URL.createObjectURL(zipBlob);
|
|
|
|
downloadAnchor.href = zipUrl;
|
|
downloadAnchor.download = `${datetimeStr}_圓形鑰匙產生器.zip`; // zip 檔名加上日期時間
|
|
statusDiv.textContent = '圖片已成功生成！請點擊下方連結下載壓縮檔。';
|
|
downloadLinkDiv.style.display = 'block';
|
|
downloadAnchor.click(); // 自動觸發下載
|
|
|
|
} catch (error) {
|
|
console.error('上傳或生成圖片失敗:', error);
|
|
statusDiv.textContent = `生成圖片失敗: ${error.message || '未知錯誤'}`;
|
|
}
|
|
});
|
|
|
|
document.getElementById('csvFile').addEventListener('change', function() {
|
|
// 自動觸發表單提交
|
|
document.getElementById('uploadForm').dispatchEvent(new Event('submit', {cancelable: true, bubbles: true}));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |