如何用纯JavaScript读取指定目录并展示所有图片？

问题说明 #

需要遍历仅存放jpg、png等格式图片的本地文件夹并展示所有图片，尝试Node.js fs模块时因环境限制出现Uncaught ReferenceError: require is not defined错误，需用纯前端JavaScript实现。

实现方案 #

由于浏览器的安全限制，无法直接通过路径读取本地文件夹，只能通过用户主动选择文件夹的方式，结合File API实现。以下是完整代码：

HTML结构 #

<!-- 文件选择控件，支持选择文件夹 -->
<input type="file" id="folderPicker" webkitdirectory directory multiple>
<!-- 图片展示容器 -->
<div id="imageContainer"></div>

JavaScript逻辑 #

const folderPicker = document.getElementById('folderPicker');
const imageContainer = document.getElementById('imageContainer');

// 监听文件夹选择事件
folderPicker.addEventListener('change', (e) => {
  // 清空容器内旧内容
  imageContainer.innerHTML = '';
  
  // 将文件列表转为数组方便处理
  const files = Array.from(e.target.files);
  
  // 过滤出指定格式的图片文件
  const imageFiles = files.filter(file => {
    return /\.(jpg|jpeg|png|gif)$/i.test(file.name);
  });
  
  // 遍历并展示图片
  imageFiles.forEach(file => {
    const img = document.createElement('img');
    const reader = new FileReader();
    
    reader.onload = function(event) {
      img.src = event.target.result;
      // 设置图片样式避免排版混乱
      img.style.maxWidth = '200px';
      img.style.margin = '10px';
      imageContainer.appendChild(img);
    };
    
    reader.readAsDataURL(file);
  });
});

关键说明 #

• webkitdirectory与directory属性：让文件选择器支持选择整个文件夹，兼容Chrome、Firefox等主流浏览器。
• FileReader API：将本地图片文件转换为DataURL，实现在页面中直接预览。
• 格式过滤：通过正则表达式筛选目标格式图片，避免非图片文件被处理。

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