67 lines
2.6 KiB
HTML
67 lines
2.6 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>CSV 轉圖片工具</title>
|
|
</head>
|
|
<body>
|
|
<h1>上傳 CSV 產生圖片</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>
|
|
|
|
<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]);
|
|
|
|
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}`);
|
|
}
|
|
|
|
// 假設後端會返回圖片的 Blob 或直接是檔案的 URL
|
|
// 如果後端直接返回圖片檔案，可以直接創建 Blob URL
|
|
const imageBlob = await response.blob();
|
|
const imageUrl = URL.createObjectURL(imageBlob);
|
|
|
|
downloadAnchor.href = imageUrl;
|
|
downloadAnchor.download = 'generated_image.png'; // 可以從後端獲取圖片名稱
|
|
statusDiv.textContent = '圖片已成功生成！';
|
|
downloadLinkDiv.style.display = 'block';
|
|
|
|
} catch (error) {
|
|
console.error('上傳或生成圖片失敗:', error);
|
|
statusDiv.textContent = `生成圖片失敗: ${error.message || '未知錯誤'}`;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |