script.js

const fileInput = document.getElementById('fileInput');
const dropZone = document.getElementById('dropZone');
const fileList = document.getElementById('fileList');

// 处理文件选择
fileInput.addEventListener('change', (e) => {
  const files = e.target.files;
  if (files && files.length > 0) {
    handleFiles(files);
  }
});

// 处理拖放
dropZone.addEventListener('dragenter', (e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log('dragenter');
  dropZone.style.borderColor = '#6200ee';
});

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log('dragover');
  dropZone.style.borderColor = '#6200ee';
});

dropZone.addEventListener('dragleave', (e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log('dragleave');
  dropZone.style.borderColor = '#ccc';
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log('drop event triggered');
  dropZone.style.borderColor = '#ccc';

  const files = e.dataTransfer.files;
  console.log('Files dropped:', files.length);

  if (files && files.length > 0) {
    console.log('Processing files...');
    handleFiles(files);
  }
});

// 防止浏览器默认的拖放行为
document.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.stopPropagation();
});

document.addEventListener('drop', (e) => {
  e.preventDefault();
  e.stopPropagation();
});

// 处理文件
function handleFiles(files) {
  for (let file of files) {
    const formData = new FormData();
    formData.append('file', file);

    // 创建文件项
    const fileItem = document.createElement('div');
    fileItem.className = 'file-item';
    fileItem.innerHTML = `
      <span class="material-icons">description</span>
      <div class="file-info">
        <div class="file-details">
          <span class="file-name">${file.name}</span>
          <span class="file-size">(${formatFileSize(file.size)})</span>
          <span class="status">准备上传...</span>
        </div>
        <div class="progress-bar">
          <div class="progress" style="width: 0%"></div>
        </div>
      </div>
      
    `;
    fileList.appendChild(fileItem);

    // 上传文件
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);

    // 上传进度
    xhr.upload.onprogress = function (e) {
      if (e.lengthComputable) {
        const percent = Math.round((e.loaded / e.total) * 100);
        const progress = fileItem.querySelector('.progress');
        progress.style.width = percent + '%';
        const status = fileItem.querySelector('.status');
        status.textContent = '上传中... ' + percent + '%';
      }
    };

    // 上传完成
    xhr.onload = function () {
      if (xhr.status === 200) {
        const response = JSON.parse(xhr.responseText);
        const status = fileItem.querySelector('.status');
        if (response.success) {
          status.textContent = '上传成功';
          status.classList.add('success');

          // 添加点击事件，在新窗口打开文件
          fileItem.addEventListener('click', () => {
            window.open(response.file.path, '_blank');
          });
        } else {
          status.textContent = response.message;
          status.classList.add('error');
        }
      } else {
        const status = fileItem.querySelector('.status');
        status.textContent = '上传失败';
        status.classList.add('error');
      }
    };

    // 上传错误
    xhr.onerror = function () {
      const status = fileItem.querySelector('.status');
      status.textContent = '上传失败';
      status.classList.add('error');
    };

    xhr.send(formData);
  }
}

// 格式化文件大小
function formatFileSize(bytes) {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}