js库文件上传js实现

文件上传的基本实现

使用原生JavaScript实现文件上传需要结合HTML的<input type="file">元素和FormData对象。以下是一个基础示例：

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

<script>
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));
}
</script>

使用第三方库实现

对于更复杂的需求，可以使用专门的文件上传库：

1. Dropzone.js

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

<div id="myDropzone" class="dropzone"></div>

<script>
Dropzone.options.myDropzone = {
  url: "/upload",
  paramName: "file",
  maxFilesize: 2, // MB
  acceptedFiles: "image/*,.pdf",
  addRemoveLinks: true
};
</script>

2. Uppy

<link href="https://releases.transloadit.com/uppy/v3.3.1/uppy.min.css" rel="stylesheet">
<script src="https://releases.transloadit.com/uppy/v3.3.1/uppy.min.js"></script>

<div id="drag-drop-area"></div>

<script>
const uppy = new Uppy.Core()
  .use(Uppy.Dashboard, {
    inline: true,
    target: '#drag-drop-area'
  })
  .use(Uppy.XHRUpload, {
    endpoint: '/upload'
  });
</script>

进度监控实现

原生JavaScript可以通过XMLHttpRequest监控上传进度：

function uploadWithProgress(file) {
  const xhr = new XMLHttpRequest();
  const formData = new FormData();
  formData.append('file', file);

  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.send(formData);
}

多文件上传实现

处理多个文件上传需要对文件列表进行遍历：

function uploadMultipleFiles() {
  const fileInput = document.getElementById('multiFileInput');
  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('/multi-upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log('上传成功:', data));
}

文件验证处理

在客户端进行文件验证可以提升用户体验：

function validateAndUpload(file) {
  // 验证文件类型
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
  if (!allowedTypes.includes(file.type)) {
    alert('不支持的文件类型');
    return false;
  }

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

  // 执行上传
  return true;
}

分块上传实现

对于大文件，可以实现分块上传：

async function chunkedUpload(file, chunkSize = 1024 * 1024) {
  const totalChunks = Math.ceil(file.size / chunkSize);

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

    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('chunkIndex', chunkIndex);
    formData.append('totalChunks', totalChunks);
    formData.append('filename', file.name);

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