javascript怎么獲取文件大小

# JavaScript怎么獲取文件大小

## 前言

在現代Web開發中，文件上傳和處理是常見的功能需求。無論是社交媒體平臺的頭像上傳，還是企業系統的文檔管理，都需要對用戶上傳的文件進行大小校驗。本文將深入探討如何使用JavaScript獲取文件大小，涵蓋從基礎實現到高級技巧的完整解決方案。

## 一、文件大小的基本概念

### 1.1 文件大小的計量單位

在計算機領域，文件大小通常以字節（Byte）為基本單位：
- 1 KB = 1024 Bytes
- 1 MB = 1024 KB
- 1 GB = 1024 MB

### 1.2 為什么需要獲取文件大小

前端獲取文件大小的典型場景包括：
- 上傳前的客戶端校驗
- 限制用戶上傳過大文件
- 顯示文件信息提升用戶體驗
- 根據文件大小采取不同處理策略

## 二、瀏覽器環境獲取文件大小

### 2.1 通過File API獲取

現代瀏覽器提供了File API來處理文件操作：

```javascript
document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file) {
    console.log(`文件大小: ${file.size} 字節`);
    // 轉換為更友好的單位
    console.log(`文件大小: ${(file.size / 1024).toFixed(2)} KB`);
  }
});

2.2 文件大小格式化為友好顯示

實現一個通用的格式化函數：

function formatFileSize(bytes) {
  if (bytes === 0) return '0 Bytes';
  
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// 使用示例
console.log(formatFileSize(123456)); // 輸出: 120.56 KB

三、Node.js環境獲取文件大小

3.1 使用fs模塊同步方法

const fs = require('fs');

try {
  const stats = fs.statSync('example.txt');
  console.log(`文件大小: ${stats.size} 字節`);
} catch (err) {
  console.error('獲取文件信息失敗:', err);
}

3.2 使用異步方法

推薦在生產環境中使用異步方法：

const fs = require('fs/promises');

async function getFileSize(filePath) {
  try {
    const stats = await fs.stat(filePath);
    return stats.size;
  } catch (err) {
    console.error('獲取文件大小失敗:', err);
    throw err;
  }
}

// 使用示例
getFileSize('example.txt')
  .then(size => console.log(`文件大小: ${size} 字節`))
  .catch(console.error);

四、高級應用場景

4.1 大文件分片上傳

當處理大文件時，分片上傳是更好的選擇：

const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB

function uploadLargeFile(file) {
  const chunks = Math.ceil(file.size / CHUNK_SIZE);
  
  for (let i = 0; i < chunks; i++) {
    const start = i * CHUNK_SIZE;
    const end = Math.min(file.size, start + CHUNK_SIZE);
    const chunk = file.slice(start, end);
    
    // 上傳分片
    uploadChunk(chunk, i, chunks);
  }
}

function uploadChunk(chunk, index, total) {
  const formData = new FormData();
  formData.append('file', chunk);
  formData.append('index', index);
  formData.append('total', total);
  
  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => {
    console.log(`分片 ${index + 1}/${total} 上傳成功`);
  });
}

4.2 文件大小限制與驗證

實現一個完整的文件驗證函數：

function validateFile(file, options = {}) {
  const {
    maxSize = 10 * 1024 * 1024, // 默認10MB
    minSize = 0,
    allowedTypes = ['image/jpeg', 'image/png']
  } = options;

  // 驗證文件類型
  if (allowedTypes.length > 0 && !allowedTypes.includes(file.type)) {
    return {
      valid: false,
      error: `不支持的文件類型，僅支持: ${allowedTypes.join(', ')}`
    };
  }

  // 驗證文件大小
  if (file.size > maxSize) {
    return {
      valid: false,
      error: `文件過大，最大允許 ${formatFileSize(maxSize)}`
    };
  }

  if (file.size < minSize) {
    return {
      valid: false,
      error: `文件過小，最小需要 ${formatFileSize(minSize)}`
    };
  }

  return { valid: true };
}

五、性能優化與注意事項

5.1 內存管理

處理大文件時需要注意： - 避免一次性讀取整個文件到內存 - 使用流(Stream)處理大文件 - 及時釋放不再需要的文件引用

5.2 Worker線程處理

對于特別大的文件，可以使用Web Worker避免阻塞主線程：

// main.js
const worker = new Worker('file-worker.js');

worker.onmessage = function(e) {
  console.log('文件大小:', e.data.size);
};

document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  worker.postMessage({ file });
});

// file-worker.js
self.onmessage = function(e) {
  const file = e.data.file;
  self.postMessage({
    size: file.size,
    formattedSize: formatFileSize(file.size)
  });
};

function formatFileSize(bytes) {
  // 同上文格式化函數
}

六、跨瀏覽器兼容性解決方案

6.1 舊版瀏覽器兼容處理

對于不支持File API的舊瀏覽器：

function getFileSize(inputElement) {
  if (inputElement.files && inputElement.files[0]) {
    // 現代瀏覽器
    return inputElement.files[0].size;
  } else if (inputElement.value) {
    // IE10及以下版本
    try {
      const fso = new ActiveXObject('Scripting.FileSystemObject');
      const file = fso.GetFile(inputElement.value);
      return file.Size;
    } catch (e) {
      console.warn('無法獲取文件大小:', e);
      return null;
    }
  }
  return null;
}

6.2 特征檢測與漸進增強

function isFileAPISupported() {
  return window.File && window.FileReader && window.FileList && window.Blob;
}

function handleFileUpload() {
  if (isFileAPISupported()) {
    // 使用現代API
  } else {
    // 回退方案
    alert('請升級瀏覽器以獲得更好的文件上傳體驗');
  }
}

七、實際應用案例

7.1 完整的文件上傳組件

class FileUploader {
  constructor(options) {
    this.options = Object.assign({
      maxSize: 10 * 1024 * 1024,
      allowedTypes: [],
      onSuccess: () => {},
      onError: () => {},
      onProgress: () => {}
    }, options);
    
    this.init();
  }
  
  init() {
    this.input = document.createElement('input');
    this.input.type = 'file';
    this.input.style.display = 'none';
    document.body.appendChild(this.input);
    
    this.input.addEventListener('change', this.handleFileSelect.bind(this));
  }
  
  handleFileSelect(e) {
    const file = e.target.files[0];
    if (!file) return;
    
    const validation = this.validateFile(file);
    if (!validation.valid) {
      this.options.onError(validation.error);
      return;
    }
    
    this.uploadFile(file);
  }
  
  validateFile(file) {
    // 使用前面定義的validateFile函數
    return validateFile(file, this.options);
  }
  
  uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);
    
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) {
        const percent = Math.round((e.loaded / e.total) * 100);
        this.options.onProgress(percent);
      }
    };
    
    xhr.onload = () => {
      if (xhr.status === 200) {
        this.options.onSuccess(JSON.parse(xhr.responseText));
      } else {
        this.options.onError(`上傳失敗: ${xhr.statusText}`);
      }
    };
    
    xhr.onerror = () => {
      this.options.onError('網絡錯誤，上傳失敗');
    };
    
    xhr.send(formData);
  }
  
  trigger() {
    this.input.click();
  }
}

// 使用示例
const uploader = new FileUploader({
  maxSize: 5 * 1024 * 1024,
  allowedTypes: ['image/jpeg', 'image/png'],
  onSuccess: (res) => console.log('上傳成功:', res),
  onError: (err) => console.error('上傳失敗:', err),
  onProgress: (percent) => console.log(`進度: ${percent}%`)
});

document.getElementById('uploadBtn').addEventListener('click', () => uploader.trigger());

八、安全考慮

8.1 客戶端驗證的局限性

重要提示： - 客戶端驗證可以被繞過 - 必須進行服務器端驗證 - 不要依賴客戶端驗證作為唯一的安全措施

8.2 安全最佳實踐

1. 服務器端設置嚴格的大小限制
2. 使用內容檢測而非僅依賴文件擴展名
3. 對上傳文件進行病毒掃描
4. 將上傳文件存儲在非Web可訪問目錄
5. 對上傳文件重命名

九、未來發展趨勢

9.1 File System Access API

新的瀏覽器API提供更強大的文件系統訪問能力：

async function getFileSizeWithNewAPI() {
  try {
    const fileHandle = await window.showOpenFilePicker();
    const file = await fileHandle[0].getFile();
    console.log('文件大小:', file.size);
  } catch (err) {
    console.error('獲取文件失敗:', err);
  }
}

9.2 WebAssembly處理大文件

使用WebAssembly提升大文件處理性能：

// 假設有一個編譯好的Wasm模塊處理文件
async function processWithWasm(file) {
  const buffer = await file.arrayBuffer();
  const wasmModule = await WebAssembly.instantiateStreaming(
    fetch('file_processor.wasm')
  );
  const result = wasmModule.instance.exports.process_file(buffer);
  return result;
}

十、總結

本文全面介紹了在JavaScript中獲取文件大小的各種方法，包括： - 瀏覽器環境下的File API使用 - Node.js環境下的文件系統操作 - 大文件處理的高級技巧 - 跨瀏覽器兼容方案 - 性能優化與安全考慮

記住，獲取文件大小只是文件處理的第一步，在實際應用中還需要考慮用戶體驗、性能優化和安全性等多方面因素。隨著Web技術的不斷發展，JavaScript處理文件的能力也在不斷增強，開發者應當持續關注新的API和技術趨勢。

附錄：常用工具函數

1. 完整文件驗證函數

function validateFile(file, options = {}) {
  const defaultOptions = {
    maxSize: 10 * 1024 * 1024, // 10MB
    minSize: 0,
    allowedTypes: [],
    allowedExtensions: [],
    maxDimensions: null, // { width, height } 僅對圖片有效
    minDimensions: null
  };
  
  const config = { ...defaultOptions, ...options };
  const errors = [];
  
  // 類型檢查
  if (config.allowedTypes.length > 0 && !config.allowedTypes.includes(file.type)) {
    errors.push(`不支持的文件類型: ${file.type}`);
  }
  
  // 擴展名檢查
  if (config.allowedExtensions.length > 0) {
    const extension = file.name.split('.').pop().toLowerCase();
    if (!config.allowedExtensions.includes(extension)) {
      errors.push(`不支持的文件擴展名: ${extension}`);
    }
  }
  
  // 大小檢查
  if (file.size > config.maxSize) {
    errors.push(`文件過大 (${formatFileSize(file.size)}), 最大允許 ${formatFileSize(config.maxSize)}`);
  }
  
  if (file.size < config.minSize) {
    errors.push(`文件過小 (${formatFileSize(file.size)}), 最小需要 ${formatFileSize(config.minSize)}`);
  }
  
  // 返回結果
  return {
    valid: errors.length === 0,
    errors: errors.length > 0 ? errors : null,
    file: errors.length === 0 ? file : null
  };
}

2. 圖片尺寸驗證

function validateImageDimensions(file, maxWidth, maxHeight) {
  return new Promise((resolve) => {
    const img = new Image();
    const url = URL.createObjectURL(file);
    
    img.onload = function() {
      URL.revokeObjectURL(url);
      const valid = img.width <= maxWidth && img.height <= maxHeight;
      resolve({
        valid,
        width: img.width,
        height: img.height,
        message: valid ? null : `圖片尺寸過大 (${img.width}×${img.height})`
      });
    };
    
    img.onerror = function() {
      URL.revokeObjectURL(url);
      resolve({ valid: false, message: '無法讀取圖片尺寸' });
    };
    
    img.src = url;
  });
}

希望這篇全面指南能幫助您掌握JavaScript中獲取文件大小的各種技術，并為您的文件上傳功能開發提供有價值的參考。 “`