如何使用JavaScript统计本地文件夹中的图片文件数量？

浏览器端限制与可行方案 #

浏览器出于安全考虑，不允许直接访问本地文件系统的指定目录，没法直接通过路径读取本地文件夹内容。唯一可行的方式是让用户手动选择目标文件夹，通过文件选择器获取文件列表：

• 使用带有webkitdirectory属性的文件输入框，让用户选择文件夹
• 遍历选中的文件列表，筛选出.jpg、.png、.gif等格式的图片文件
• 统计符合条件的文件数量

示例代码：

<input type="file" id="folderPicker" webkitdirectory />
<script>
document.getElementById('folderPicker').addEventListener('change', (e) => {
  const files = Array.from(e.target.files);
  // 定义要识别的图片扩展名
  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
  // 筛选图片文件
  const imageFiles = files.filter(file => {
    const ext = file.name.toLowerCase().slice(file.name.lastIndexOf('.'));
    return imageExtensions.includes(ext);
  });
  console.log(`该文件夹下共有 ${imageFiles.length} 张图片`);
});
</script>

Node.js端解决方案 #

如果是在Node.js环境（比如后端脚本或桌面应用），可以直接通过文件系统模块fs读取目录内容，再筛选图片文件：

异步方式（推荐） #

const fs = require('fs').promises;
const path = require('path');

async function countImagesInDir(dirPath) {
  try {
    const files = await fs.readdir(dirPath, { withFileTypes: true });
    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
    let count = 0;
    for (const file of files) {
      if (file.isFile()) {
        const ext = path.extname(file.name).toLowerCase();
        if (imageExtensions.includes(ext)) {
          count++;
        }
      }
    }
    console.log(`目录下图片数量：${count}`);
    return count;
  } catch (err) {
    console.error('读取目录失败：', err);
  }
}

// 调用示例
countImagesInDir('./target-folder');

同步方式 #

const fs = require('fs');
const path = require('path');

function countImagesInDirSync(dirPath) {
  try {
    const files = fs.readdirSync(dirPath, { withFileTypes: true });
    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
    let count = 0;
    files.forEach(file => {
      if (file.isFile()) {
        const ext = path.extname(file.name).toLowerCase();
        if (imageExtensions.includes(ext)) {
          count++;
        }
      }
    });
    console.log(`目录下图片数量：${count}`);
    return count;
  } catch (err) {
    console.error('读取目录失败：', err);
  }
}

// 调用示例
countImagesInDirSync('./target-folder');

补充：如果需要递归统计子文件夹里的图片，可以在遍历文件时判断是否为目录，然后递归调用统计函数。

内容的提问来源于stack exchange，提问作者Pourya1367