js实现文件上传

基本文件上传实现

使用HTML的<input type="file">元素配合JavaScript实现基础文件上传功能：

<input type="file" id="fileInput">
<button onclick="uploadFile()">上传</button>

function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  if (!file) {
    alert('请选择文件');
    return;
  }

  const formData = new FormData();
  formData.append('file', file);

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log('上传成功:', data))
  .catch(error => console.error('上传失败:', error));
}

多文件上传支持

通过添加multiple属性并调整代码实现多文件上传：

<input type="file" id="fileInput" multiple>

function uploadFiles() {
  const fileInput = document.getElementById('fileInput');
  const files = fileInput.files;

  if (files.length === 0) {
    alert('请选择文件');
    return;
  }

  const formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append('files', files[i]);
  }

  fetch('/upload-multiple', {
    method: 'POST',
    body: formData
  })
  .then(/* 处理响应 */);
}

进度监控实现

利用XMLHttpRequest对象监控上传进度：

function uploadWithProgress() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const xhr = new XMLHttpRequest();

  xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
      const percent = Math.round((event.loaded / event.total) * 100);
      console.log(`上传进度: ${percent}%`);
    }
  });

  xhr.open('POST', '/upload', true);
  xhr.onload = () => {
    if (xhr.status === 200) {
      console.log('上传完成');
    }
  };

  const formData = new FormData();
  formData.append('file', file);
  xhr.send(formData);
}

文件类型和大小验证

在上传前进行客户端验证：

function validateAndUpload() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  // 文件类型验证
  const allowedTypes = ['image/jpeg', 'image/png'];
  if (!allowedTypes.includes(file.type)) {
    alert('仅支持JPEG和PNG格式');
    return;
  }

  // 文件大小验证（5MB限制）
  const maxSize = 5 * 1024 * 1024;
  if (file.size > maxSize) {
    alert('文件大小不能超过5MB');
    return;
  }

  // 验证通过后上传
  uploadFile(file);
}

拖放上传实现

添加拖放区域实现拖放上传功能：

<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px;">
  拖放文件到这里
</div>

const dropArea = document.getElementById('dropArea');

dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.style.borderColor = 'blue';
});

dropArea.addEventListener('dragleave', () => {
  dropArea.style.borderColor = '#ccc';
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.style.borderColor = '#ccc';

  const files = e.dataTransfer.files;
  if (files.length > 0) {
    const formData = new FormData();
    formData.append('file', files[0]);

    fetch('/upload', {
      method: 'POST',
      body: formData
    });
  }
});

文件预览功能

在上传前生成文件预览：

function showPreview() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const preview = document.getElementById('preview');

  if (file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.onload = (e) => {
      preview.innerHTML = `<img src="${e.target.result}" style="max-width: 200px;">`;
    };
    reader.readAsDataURL(file);
  } else {
    preview.textContent = `文件名: ${file.name} (${(file.size/1024).toFixed(2)}KB)`;
  }
}

断点续传实现

通过分片上传实现断点续传功能：

async function chunkedUpload(file) {
  const chunkSize = 1 * 1024 * 1024; // 1MB分片
  const totalChunks = Math.ceil(file.size / chunkSize);
  let uploadedChunks = 0;

  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', totalChunks);
    formData.append('fileId', file.name + file.size);

    try {
      await fetch('/upload-chunk', {
        method: 'POST',
        body: formData
      });
      uploadedChunks++;
      console.log(`上传进度: ${Math.round((uploadedChunks/totalChunks)*100)}%`);
    } catch (error) {
      console.error(`分片${i}上传失败:`, error);
      i--; // 重试当前分片
    }
  }

  console.log('所有分片上传完成');
}