如何只选择文件夹中的jpg文件并将其显示在html上

要实现只选择文件夹中的jpg文件并将其显示在HTML上，可以通过以下步骤来完成：

使用HTML和CSS创建一个基本的网页结构，包括一个用于显示图片的区域。
使用JavaScript编写一个函数，用于处理文件选择事件。可以使用<input type="file">元素来实现文件选择功能。
在文件选择事件中，获取用户选择的文件，并筛选出文件夹中的jpg文件。
使用File API中的FileReader对象，读取选中的jpg文件，并将其转换为DataURL。
将DataURL赋值给一个<img>元素的src属性，以在HTML上显示图片。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Display JPG Files</title>
  <style>
    #image-container {
      display: flex;
      flex-wrap: wrap;
    }
    .image-item {
      width: 200px;
      height: 200px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <input type="file" id="file-input" multiple>
  <div id="image-container"></div>

  <script>
    function handleFileSelect(event) {
      const files = event.target.files;
      const imageContainer = document.getElementById('image-container');

      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        if (file.type === 'image/jpeg') {
          const reader = new FileReader();
          reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.classList.add('image-item');
            imageContainer.appendChild(img);
          }
          reader.readAsDataURL(file);
        }
      }
    }

    const fileInput = document.getElementById('file-input');
    fileInput.addEventListener('change', handleFileSelect);
  </script>
</body>
</html>

这段代码创建了一个包含文件选择输入框和图片显示区域的网页。当用户选择文件后，会触发handleFileSelect函数。该函数会遍历选中的文件，筛选出jpg文件，并使用FileReader对象将其转换为DataURL。然后，将DataURL赋值给<img>元素的src属性，从而在HTML上显示图片。

请注意，这只是一个简单的示例，实际应用中可能需要添加更多的错误处理和优化。