ruby0451/WS
0
1document.addEventListener('DOMContentLoaded', () => {2 const imageInput = document.getElementById('image-input');3 const processBtn = document.getElementById('process-btn');4 const fileListContainer = document.getElementById('file-list');5 const resultsContainer = document.getElementById('results-container');6 const loader = document.getElementById('loader');7 8 let selectedFiles = [];9 10 imageInput.addEventListener('change', (event) => {11 selectedFiles = Array.from(event.target.files);12 fileListContainer.innerHTML = ''; // Clear previous list13 if (selectedFiles.length > 0) {14 const list = document.createElement('ul');15 selectedFiles.forEach(file => {16 const listItem = document.createElement('li');17 listItem.textContent = file.name;18 list.appendChild(listItem);19 });20 fileListContainer.appendChild(list);21 processBtn.disabled = false;22 } else {23 processBtn.disabled = true;24 }25 resultsContainer.innerHTML = '<p>处理完成后,这里将提供下载链接。</p>'; // Reset results26 });27 28 processBtn.addEventListener('click', async () => {29 if (selectedFiles.length === 0) {30 alert('请先选择至少一张图片!');31 return;32 }33 34 processBtn.disabled = true;35 loader.style.display = 'block';36 resultsContainer.innerHTML = ''; // Clear previous results37 38 const formData = new FormData();39 selectedFiles.forEach(file => {40 formData.append('files', file);41 });42 43 try {44 const response = await fetch('/remove-watermark-batch', {45 method: 'POST',46 body: formData,47 });48 49 if (!response.ok) {50 throw new Error(`HTTP error! status: ${response.status}`);51 }52 53 const zipBlob = await response.blob();54 const downloadUrl = URL.createObjectURL(zipBlob);55 const downloadLink = document.createElement('a');56 downloadLink.href = downloadUrl;57 downloadLink.download = 'processed_images.zip';58 downloadLink.textContent = '下载处理结果 (ZIP)';59 downloadLink.className = 'download-btn';60 resultsContainer.appendChild(downloadLink);61 62 } catch (error) {63 console.error('处理图片时出错:', error);64 resultsContainer.innerHTML = `<p style="color: red;">处理失败: ${error.message}</p>`;65 } finally {66 loader.style.display = 'none';67 processBtn.disabled = false;68 }69 });70});