123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- document.addEventListener('DOMContentLoaded', () => {
- const dropZone = document.getElementById('dropZone');
- const fileInput = document.getElementById('fileInput');
- const uploadButton = document.getElementById('uploadButton');
- const status = document.getElementById('status');
- let selectedFile;
- dropZone.addEventListener('click', () => fileInput.click());
- fileInput.addEventListener('change', (event) => {
- selectedFile = event.target.files[0];
- handleFileSelection(selectedFile);
- });
- dropZone.addEventListener('dragover', (event) => {
- event.preventDefault();
- dropZone.classList.add('dragover');
- });
- dropZone.addEventListener('dragleave', () => {
- dropZone.classList.remove('dragover');
- });
- dropZone.addEventListener('drop', (event) => {
- event.preventDefault();
- dropZone.classList.remove('dragover');
- selectedFile = event.dataTransfer.files[0];
- handleFileSelection(selectedFile);
- });
- uploadButton.addEventListener('click', async () => {
- if (!selectedFile) {
- status.textContent = 'No file selected';
- return;
- }
- const formData = new FormData();
- formData.append('file', selectedFile);
- try {
- const md5Hash = await calculateMD5(selectedFile);
- console.log('MD5 Hash:', md5Hash); // Debugging log
- formData.append('md5', md5Hash);
- const token = localStorage.getItem('Authorization');
- const response = await fetch('http://127.0.0.1:8080/api/admin/upfile', {
- method: 'POST',
- headers: {
- 'Authorization': `Bearer ${token}`
- },
- body: formData
- });
- const data = await response.json();
- if (!response.ok) {
- throw new Error(data.error || 'Unknown error');
- }
- alert('File uploaded successfully!');
- resetUploadState();
- } catch (error) {
- console.error('File upload failed:', error); // Debugging log
- status.textContent = `File upload failed: ${error.message}`;
- }
- });
- function handleFileSelection(file) {
- if (file && file.name.endsWith('.xlsx')) {
- dropZone.textContent = `File selected: ${file.name}`;
- uploadButton.disabled = false;
- status.textContent = '';
- } else {
- selectedFile = null;
- dropZone.textContent = 'Drag & Drop a file here or click to select';
- uploadButton.disabled = true;
- status.textContent = 'File type error: Please upload an .xlsx file';
- }
- }
- function resetUploadState() {
- dropZone.textContent = 'Drag & Drop a file here or click to select';
- status.textContent = '';
- selectedFile = null;
- uploadButton.disabled = true;
- fileInput.value = ''; // Clear the file input
- disableUpload();
- }
- function disableUpload() {
- dropZone.removeEventListener('click', () => fileInput.click());
- dropZone.removeEventListener('dragover', handleDragOver);
- dropZone.removeEventListener('dragleave', handleDragLeave);
- dropZone.removeEventListener('drop', handleDrop);
- uploadButton.removeEventListener('click', handleUploadClick);
- }
- async function handleUploadClick() {
- try {
- const formData = new FormData();
- formData.append('file', selectedFile);
-
- const response = await fetch('/upload', {
- method: 'POST',
- body: formData
- });
-
- if (!response.ok) {
- throw new Error('上传失败');
- }
-
- const result = await response.json();
- console.log('上传成功:', result);
- } catch (error) {
- console.error('上传错误:', error);
- }
- }
-
- function handleDragOver(event) {
- event.preventDefault();
- dropZone.classList.add('dragover');
- }
- function handleDragLeave() {
- dropZone.classList.remove('dragover');
- }
- function handleDrop(event) {
- event.preventDefault();
- dropZone.classList.remove('dragover');
- selectedFile = event.dataTransfer.files[0];
- handleFileSelection(selectedFile);
- }
-
- async function calculateMD5(file) {
- return new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.onload = (event) => {
- const fileData = event.target.result;
- const md5Hash = CryptoJS.MD5(CryptoJS.lib.WordArray.create(fileData)).toString();
- resolve(md5Hash);
- };
- reader.onerror = (error) => {
- reject(error);
- };
- reader.readAsArrayBuffer(file);
- });
- }
- });
|