script.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. document.addEventListener('DOMContentLoaded', () => {
  2. const dropZone = document.getElementById('dropZone');
  3. const fileInput = document.getElementById('fileInput');
  4. const uploadButton = document.getElementById('uploadButton');
  5. const status = document.getElementById('status');
  6. let selectedFile;
  7. dropZone.addEventListener('click', () => fileInput.click());
  8. fileInput.addEventListener('change', (event) => {
  9. selectedFile = event.target.files[0];
  10. handleFileSelection(selectedFile);
  11. });
  12. dropZone.addEventListener('dragover', (event) => {
  13. event.preventDefault();
  14. dropZone.classList.add('dragover');
  15. });
  16. dropZone.addEventListener('dragleave', () => {
  17. dropZone.classList.remove('dragover');
  18. });
  19. dropZone.addEventListener('drop', (event) => {
  20. event.preventDefault();
  21. dropZone.classList.remove('dragover');
  22. selectedFile = event.dataTransfer.files[0];
  23. handleFileSelection(selectedFile);
  24. });
  25. uploadButton.addEventListener('click', async () => {
  26. if (!selectedFile) {
  27. status.textContent = 'No file selected';
  28. return;
  29. }
  30. const formData = new FormData();
  31. formData.append('file', selectedFile);
  32. try {
  33. const md5Hash = await calculateMD5(selectedFile);
  34. console.log('MD5 Hash:', md5Hash); // Debugging log
  35. formData.append('md5', md5Hash);
  36. const token = localStorage.getItem('Authorization');
  37. const response = await fetch('http://127.0.0.1:8080/api/admin/upfile', {
  38. method: 'POST',
  39. headers: {
  40. 'Authorization': `Bearer ${token}`
  41. },
  42. body: formData
  43. });
  44. const data = await response.json();
  45. if (!response.ok) {
  46. throw new Error(data.error || 'Unknown error');
  47. }
  48. alert('File uploaded successfully!');
  49. resetUploadState();
  50. } catch (error) {
  51. console.error('File upload failed:', error); // Debugging log
  52. status.textContent = `File upload failed: ${error.message}`;
  53. }
  54. });
  55. function handleFileSelection(file) {
  56. if (file && file.name.endsWith('.xlsx')) {
  57. dropZone.textContent = `File selected: ${file.name}`;
  58. uploadButton.disabled = false;
  59. status.textContent = '';
  60. } else {
  61. selectedFile = null;
  62. dropZone.textContent = 'Drag & Drop a file here or click to select';
  63. uploadButton.disabled = true;
  64. status.textContent = 'File type error: Please upload an .xlsx file';
  65. }
  66. }
  67. function resetUploadState() {
  68. dropZone.textContent = 'Drag & Drop a file here or click to select';
  69. status.textContent = '';
  70. selectedFile = null;
  71. uploadButton.disabled = true;
  72. fileInput.value = ''; // Clear the file input
  73. disableUpload();
  74. }
  75. function disableUpload() {
  76. dropZone.removeEventListener('click', () => fileInput.click());
  77. dropZone.removeEventListener('dragover', handleDragOver);
  78. dropZone.removeEventListener('dragleave', handleDragLeave);
  79. dropZone.removeEventListener('drop', handleDrop);
  80. uploadButton.removeEventListener('click', handleUploadClick);
  81. }
  82. async function handleUploadClick() {
  83. try {
  84. const formData = new FormData();
  85. formData.append('file', selectedFile);
  86. const response = await fetch('/upload', {
  87. method: 'POST',
  88. body: formData
  89. });
  90. if (!response.ok) {
  91. throw new Error('上传失败');
  92. }
  93. const result = await response.json();
  94. console.log('上传成功:', result);
  95. } catch (error) {
  96. console.error('上传错误:', error);
  97. }
  98. }
  99. function handleDragOver(event) {
  100. event.preventDefault();
  101. dropZone.classList.add('dragover');
  102. }
  103. function handleDragLeave() {
  104. dropZone.classList.remove('dragover');
  105. }
  106. function handleDrop(event) {
  107. event.preventDefault();
  108. dropZone.classList.remove('dragover');
  109. selectedFile = event.dataTransfer.files[0];
  110. handleFileSelection(selectedFile);
  111. }
  112. async function calculateMD5(file) {
  113. return new Promise((resolve, reject) => {
  114. const reader = new FileReader();
  115. reader.onload = (event) => {
  116. const fileData = event.target.result;
  117. const md5Hash = CryptoJS.MD5(CryptoJS.lib.WordArray.create(fileData)).toString();
  118. resolve(md5Hash);
  119. };
  120. reader.onerror = (error) => {
  121. reject(error);
  122. };
  123. reader.readAsArrayBuffer(file);
  124. });
  125. }
  126. });