当前位置：首页 > JavaScript

js实现文件

2026-03-02 08:23:02JavaScript

JavaScript 文件操作实现方法

读取文件内容

使用FileReader API可以读取用户选择的文件内容。以下是一个读取文本文件的示例：

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

下载文件

通过创建Blob对象和URL.createObjectURL()方法可以实现文件下载：

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();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

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

文件上传

使用FormData和fetch API可以实现文件上传：

js实现文件

const uploadFile = async (file, uploadUrl) => {
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await fetch(uploadUrl, {
      method: 'POST',
      body: formData
    });
    return await response.json();
  } catch (error) {
    console.error('Upload failed:', error);
  }
};

文件拖放处理

实现拖放区域接收文件：

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

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

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

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

  const files = e.dataTransfer.files;
  if (files.length) {
    console.log('Dropped files:', files);
  }
});

文件系统访问API

现代浏览器支持File System Access API，允许更高级的文件操作：

js实现文件

async function saveFile() {
  try {
    const handle = await window.showSaveFilePicker({
      suggestedName: 'untitled.txt',
      types: [{
        description: 'Text Files',
        accept: {'text/plain': ['.txt']}
      }]
    });

    const writable = await handle.createWritable();
    await writable.write('File content here');
    await writable.close();
  } catch (err) {
    console.error(err.name, err.message);
  }
}

文件信息获取

获取文件的基本信息：

function getFileInfo(file) {
  return {
    name: file.name,
    size: file.size,
    type: file.type,
    lastModified: new Date(file.lastModified)
  };
}

大文件分片处理

对于大文件，可以分片读取处理：

async function processLargeFile(file, chunkSize = 1024 * 1024) {
  let offset = 0;

  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const chunkContent = await readChunk(chunk);
    // 处理每个分片
    offset += chunkSize;
  }
}

function readChunk(chunk) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.readAsText(chunk);
  });
}