js实现导入

2026-02-01 21:36:05JavaScript

使用 `<input type="file">` 实现文件导入

通过 HTML 的 input 元素配合 JavaScript 监听文件选择事件，读取文件内容。

<input type="file" id="fileInput" accept=".txt,.csv,.json">
<script>
  document.getElementById('fileInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
      console.log(e.target.result); // 输出文件内容
    };
    reader.readAsText(file); // 以文本形式读取
  });
</script>

使用 `fetch` 或 `XMLHttpRequest` 实现远程文件导入

从服务器动态加载文件内容，适用于需要跨域或动态获取资源的场景。

// 使用 fetch
fetch('data.json')
  .then(response => response.json())
  .then(data => console.log(data));

// 使用 XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.csv', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

使用第三方库解析文件内容

针对特定格式（如 Excel、CSV），可使用库简化处理流程。

// 使用 Papa Parse 解析 CSV
Papa.parse('file.csv', {
  download: true,
  complete: function(results) {
    console.log(results.data);
  }
});

// 使用 xlsx 解析 Excel
const workbook = XLSX.readFile('file.xlsx');
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const data = XLSX.utils.sheet_to_json(worksheet);

处理大文件分片上传

通过分片读取大文件，避免内存溢出。

const chunkSize = 1024 * 1024; // 1MB
let offset = 0;
const file = e.target.files[0];

const readChunk = () => {
  const chunk = file.slice(offset, offset + chunkSize);
  const reader = new FileReader();
  reader.onload = function(e) {
    // 处理分片数据
    offset += chunkSize;
    if (offset < file.size) readChunk();
  };
  reader.readAsArrayBuffer(chunk);
};
readChunk();