HTML5文件夹内容读取示例

最新推荐文章于 2024-07-26 08:29:23 发布

zoujiawei6

最新推荐文章于 2024-07-26 08:29:23 发布

阅读量2.1k

点赞数 1

分类专栏： Html

本文链接：https://blog.csdn.net/zoujiawei6/article/details/90664643

版权

Html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo</title>
  <style>
    table,
    table td,
    table th {
      border: 1px solid #CCC;
    }
  </style>
</head>

<body>
  <div>
    <input type="file" webkitdirectory directory multiple name="files" id="files" onchange="fileReader(this)" />
    <p>txt文件内容将读取到控制台按F12查看</p>
  </div>
  <table id="table">
    <tr>
      <th>webkit相对路径</th>
      <th>最后修改日期</th>
      <th>大小</th>
      <th>名称</th>
    </tr>
  </table>
  <script>
    const table = document.getElementById('table')

    function fileReader(element) {
      const files = element.files
      for (let index = 0; index < files.length; index++) {
        const file = files[index],
          webkitRelativePath = file.webkitRelativePath,
          lastModifiedDate = file.lastModifiedDate,
          size = file.size,
          name = file.name
        tr = createTr(webkitRelativePath, lastModifiedDate, size, name)

        if (name.endsWith('txt')) {
          readAsText(file)
        }

        table.appendChild(tr)
      }
    }

    function createTr(webkitRelativePath, lastModifiedDate, size, name) {
      const tr = document.createElement('tr'),
        td1 = document.createElement('td'),
        td2 = document.createElement('td'),
        td3 = document.createElement('td'),
        td4 = document.createElement('td')

      td1.innerHTML = webkitRelativePath
      td2.innerHTML = lastModifiedDate
      td3.innerHTML = size
      td4.innerHTML = name

      tr.appendChild(td1)
      tr.appendChild(td2)
      tr.appendChild(td3)
      tr.appendChild(td4)
      return tr
    }

    /**
     * 读取成文本
     */
    function readAsText(file) {
      const fileReader = new FileReader()
      // 编码乱码问题很严重
      fileReader.readAsText(file, 'GBK')
      fileReader.onload = (event) => {
        const text = fileReader.result
        console.log(`识别格式：GBK\n============\n${text}\n============\n`)
      }
    }

    // /**
    //  * 读取成二进制
    //  */
    // function readAsArrayBuffer(file) {
    //   const fileReader = new FileReader()
    //   fileReader.readAsArrayBuffer(file)
    //   fileReader.onload = (event) => {
    //     const binary = fileReader.result
    //     // 处理二进制数据
    //   }
    // }
  </script>
</body>

</html>