用JavaScript遍历文件夹中所有excel、cvs、pdf文件到前端页面展示的代码

在前端使用JavaScript遍历文件夹并展示文件是不常见的，因为浏览器的安全限制不允许直接读取本地文件系统。但是，你可以使用文件上传功能来实现类似的效果。以下是一个示例代码：

HTML部分：

<input type="file" id="fileInput" multiple>
<div id="fileList"></div>

JavaScript部分：

function handleFileSelect(evt) {
  var files = evt.target.files; // 获取选择的文件数组
  var fileList = document.getElementById('fileList');
  fileList.innerHTML = ''; // 清空文件列表

  // 遍历选择的文件
  for (var i = 0, f; f = files[i]; i++) {
    var fileName = f.name;
    var fileType = fileName.split('.').pop().toLowerCase(); // 获取文件类型

    // 检查文件类型是否为Excel、CSV或PDF
    if (fileType === 'xlsx' || fileType === 'xls' || fileType === 'csv' || fileType === 'pdf') {
      var listItem = document.createElement('div');
      listItem.textContent = fileName;
      fileList.appendChild(listItem);
    }
  }
}

document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);

这段代码创建了一个文件上传的`<input>`元素和一个用于展示文件列表的`<div>`元素。当用户选择文件后，`handleFileSelect`函数会被触发。在这个函数中，我们遍历了用户选择的每个文件，并检查文件类型是否为Excel、CSV或PDF。如果是，则创建一个新的`<div>`元素，并将文件名添加到文件列表中。

请注意，这仅仅是一个示例，它只在前端展示了符合条件的文件名，并没有上传文件内容。如果你需要对文件进行更多操作，比如上传到服务器或读取文件内容，你可能需要使用其他技术，比如后端处理或使用浏览器的File API。