js实现文件

2026-01-31 17:14:20JavaScript

文件上传与读取

使用<input type="file">元素获取用户选择的文件，通过FileReader对象读取文件内容：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const content = e.target.result;
    console.log(content);
  };

  reader.readAsText(file); // 其他方法：readAsArrayBuffer, readAsDataURL
});

文件下载

通过创建Blob对象和URL对象实现文件下载：

function downloadFile(content, fileName, mimeType) {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();

  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 100);
}

// 使用示例
downloadFile('Hello World', 'test.txt', 'text/plain');

文件切片上传

对于大文件可采用分片上传策略：

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

  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('chunk', chunk);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', totalChunks);
    formData.append('fileName', file.name);

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

文件拖放功能

实现拖放区域接收文件：

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

dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.classList.add('dragover');
});

dropArea.addEventListener('dragleave', () => {
  dropArea.classList.remove('dragover');
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.classList.remove('dragover');

  const files = e.dataTransfer.files;
  if (files.length) {
    handleFiles(files);
  }
});

文件类型验证

验证文件扩展名和MIME类型：

function validateFile(file, allowedTypes) {
  const extension = file.name.split('.').pop().toLowerCase();
  const isValidExtension = allowedTypes.extensions.includes(extension);
  const isValidMime = allowedTypes.mimeTypes.includes(file.type);

  return isValidExtension && isValidMime;
}

// 使用示例
const valid = validateFile(file, {
  extensions: ['jpg', 'png'],
  mimeTypes: ['image/jpeg', 'image/png']
});

文件压缩

使用第三方库如compressor.js实现图片压缩：

new Compressor(file, {
  quality: 0.8,
  maxWidth: 800,
  success(result) {
    const compressedFile = new File([result], file.name, {
      type: result.type
    });
    // 处理压缩后的文件
  },
  error(err) {
    console.error(err.message);
  }
});

文件预览

实现图片/PDF等文件的预览功能：

js实现文件

function previewFile(file) {
  const preview = document.getElementById('preview');

  if (file.type.startsWith('image/')) {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(file);
    preview.appendChild(img);
  } else if (file.type === 'application/pdf') {
    // 使用PDF.js等库处理PDF预览
  }
}