时间戳

首页 > 解决方案 > javascript按目录读取多个文件

javascript - javascript按目录读取多个文件

问题描述

我正在尝试创建一个站点，该站点可以读取预定义文件夹中的所有文本。我找到了我想要的代码，但在此代码中，您必须通过文件输入选择文件。我想让它自动读取文件夹中所有文件的文本并打印它们。

我发现的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <label>Select multiple files to read from your system:</label>
        <input type="file" id="fileinput" multiple />

        <script>
            /**
             *  Simple JavaScript Promise that reads a file as text.
             **/
            function readFileAsText(file){
                return new Promise(function(resolve,reject){
                    let fr = new FileReader();

                    fr.onload = function(){
                        resolve(fr.result);
                    };

                    fr.onerror = function(){
                        reject(fr);
                    };

                    fr.readAsText(file);
                });
            }

            // Handle multiple fileuploads
            document.getElementById("fileinput").addEventListener("change", function(ev){
                let files = ev.currentTarget.files;
                let readers = [];

                // Abort if there were no files selected
                if(!files.length) return;

                // Store promises in array
                for(let i = 0;i < files.length;i++){
                    readers.push(readFileAsText(files[i]));
                }
                
                // Trigger Promises
                Promise.all(readers).then((values) => {
                    // Values will be an array that contains an item
                    // with the text of every selected file
                    // ["File1 Content", "File2 Content" ... "FileN Content"]
                    console.log(values);
                });
            }, false);
        </script>
    </body>
</html>

谢谢！

标签： javascript

解决方案

您可以要求一个 DirectoryHandle，将其保存到 IndexedDB 并在任何时候重用它

const handle = await window.showDirectoryPicker()

也可以通过拖放获得句柄

const handle = await dataTransfer.items[0].getAsFileSystemHandle()

还有一个沙盒目录可供您使用navigator.storage.getDirectory()

推荐阅读