js实现导入

2026-03-14 20:53:37JavaScript

文件导入基础实现

使用HTML的<input type="file">元素配合File API实现基础文件选择功能：

<input type="file" id="fileInput" />
<script>
  document.getElementById('fileInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    console.log('Selected file:', file.name, file.size, file.type);
  });
</script>

文本文件读取

通过FileReader对象读取文本文件内容：

const reader = new FileReader();
reader.onload = function(e) {
  const content = e.target.result;
  console.log('File content:', content);
};
reader.readAsText(file);  // file为之前获取的文件对象

Excel文件解析

使用xlsx库处理Excel文件：

js实现导入

import * as XLSX from 'xlsx';

function handleExcel(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, {type: 'array'});
    const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
    const jsonData = XLSX.utils.sheet_to_json(firstSheet);
    console.log('Excel data:', jsonData);
  };
  reader.readAsArrayBuffer(file);
}

图片预览

实现图片上传预览功能：

function previewImage(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = document.createElement('img');
    img.src = e.target.result;
    img.style.maxWidth = '300px';
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file);
}

大文件分片上传

处理大文件上传的方案：

js实现导入

function uploadLargeFile(file) {
  const chunkSize = 1024 * 1024; // 1MB
  let offset = 0;

  while(offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('offset', offset);

    fetch('/upload', {
      method: 'POST',
      body: formData
    }).then(response => response.json());

    offset += chunkSize;
  }
}

拖拽上传实现

添加拖拽区域支持：

<div id="dropZone" style="border: 2px dashed #ccc; padding: 20px;">
  拖拽文件到此处
</div>
<script>
  const dropZone = document.getElementById('dropZone');

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

  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.style.borderColor = '#ccc';
    const files = e.dataTransfer.files;
    console.log('Dropped files:', files);
  });
</script>

文件类型验证

添加文件类型检查：

function validateFile(file, allowedTypes) {
  const fileType = file.type;
  const extension = file.name.split('.').pop().toLowerCase();

  return allowedTypes.includes(fileType) || 
         allowedTypes.includes(`.${extension}`);
}

// 使用示例
if(!validateFile(file, ['image/jpeg', '.png', 'application/pdf'])) {
  alert('不支持的文件类型');
}

进度显示

上传进度监控实现：

function uploadWithProgress(file) {
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = function(e) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`上传进度: ${percent}%`);
  };

  xhr.open('POST', '/upload', true);
  const formData = new FormData();
  formData.append('file', file);
  xhr.send(formData);
}

标签: js