HTML JavaScript 读取多个本地文件

最新推荐文章于 2024-11-01 13:37:40 发布

ccmcu

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量1.5k

点赞数 1

文章标签： javascript

原文链接：https://segmentfault.com/q/1010000009679204

版权

HTML JavaScript 读取多个本地文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <button class="save_button" onclick="f_load_files()">载入文件</button>
    <input type="file" id="selectFiles"  webkitdirectory/>
<body>

<script>
files_content = [];

//因为载入文件是异步操作，函数必须采用asyn/await解决
async function f_load_files(){
    var selectFiles = document.getElementById("selectFiles").files;
    files_content =[];

    for(var file of selectFiles)
    {
        const readFileAsync = file => new Promise(resolve => {
            const reader = new FileReader();
            reader.onload = evt => resolve(evt.target.result)
            reader.readAsText(file)
          })

            files_content.push(await readFileAsync(file));
    }
    alert(files_content);
}
</script>
</body>
</html>