使用<input type="file">结合iframe展示上传文件夹中index.html失败求助

原代码存在两个核心问题导致index.html无法加载：

1. FileList访问方式错误：fileElement.files是FileList集合，不能通过["index.html"]直接按文件名获取文件，必须遍历集合匹配文件名。
2. 文件路径处理错误：File对象不能直接作为iframe的src，需要通过URL.createObjectURL()生成浏览器可识别的临时URL。

另外，如果你的index.html依赖文件夹内的其他资源（如样式表、脚本、图片），直接加载单个文件的URL会导致相对路径资源加载失败，因为这些资源没有被关联到同一个访问上下文。下面分两种场景给出解决方案：

场景1：仅加载独立的index.html（无外部依赖） #

修正后的代码如下：

<!doctype html>
<html>
    <body>
        <input type="file" id="fileSelect" webkitdirectory>
        <iframe id="iframeView" height="400" width="600"></iframe>
        
        <script>
            const frameElement = document.getElementById("iframeView");
            const fileElement = document.getElementById("fileSelect");
            
            fileElement.addEventListener("change", loadURL);
            
            function loadURL() {
                // 遍历FileList，找到index.html文件
                const indexFile = Array.from(fileElement.files).find(file => file.name === "index.html");
                if (indexFile) {
                    // 生成临时URL并赋值给iframe
                    frameElement.src = URL.createObjectURL(indexFile);
                    // 页面卸载时释放URL资源，避免内存泄漏
                    window.addEventListener('unload', () => {
                        URL.revokeObjectURL(frameElement.src);
                    });
                } else {
                    alert("选中的文件夹中未找到index.html文件");
                }
            }
        </script>
    </body>
</html>

场景2：加载包含依赖资源的完整站点 #

如果需要支持index.html加载文件夹内的其他资源，需要使用FileSystem Access API（Chrome、Edge等现代浏览器支持），通过目录条目获取完整的文件结构，并为iframe创建可访问整个目录的上下文：

<!doctype html>
<html>
    <body>
        <input type="file" id="fileSelect" webkitdirectory>
        <iframe id="iframeView" height="400" width="600"></iframe>
        
        <script>
            const frameElement = document.getElementById("iframeView");
            const fileElement = document.getElementById("fileSelect");
            
            fileElement.addEventListener("change", async loadSite);
            
            async function loadSite() {
                // 获取第一个文件的目录条目
                const entry = await fileElement.files[0].webkitGetAsEntry();
                if (!entry || !entry.isDirectory) return;
                
                // 在目录中查找index.html
                const indexEntry = await getFileEntry(entry, "index.html");
                if (!indexEntry) {
                    alert("选中的文件夹中未找到index.html文件");
                    return;
                }
                
                // 获取文件对象并生成URL
                const indexFile = await getFileFromEntry(indexEntry);
                frameElement.src = URL.createObjectURL(indexFile);
                
                // 关键：为iframe设置sandbox，允许访问FileSystem资源
                frameElement.sandbox = "allow-scripts allow-same-origin allow-top-navigation";
                
                // 页面卸载时释放资源
                window.addEventListener('unload', () => {
                    URL.revokeObjectURL(frameElement.src);
                });
            }
            
            // 递归目录查找指定文件
            function getFileEntry(directoryEntry, fileName) {
                return new Promise((resolve, reject) => {
                    const reader = directoryEntry.createReader();
                    const readEntries = () => {
                        reader.readEntries(async (entries) => {
                            if (!entries.length) {
                                resolve(null);
                                return;
                            }
                            for (const entry of entries) {
                                if (entry.isFile && entry.name === fileName) {
                                    resolve(entry);
                                    return;
                                } else if (entry.isDirectory) {
                                    const result = await getFileEntry(entry, fileName);
                                    if (result) {
                                        resolve(result);
                                        return;
                                    }
                                }
                            }
                            readEntries();
                        }, reject);
                    };
                    readEntries();
                });
            }
            
            // 从目录条目获取File对象
            function getFileFromEntry(fileEntry) {
                return new Promise((resolve, reject) => {
                    fileEntry.file(resolve, reject);
                });
            }
        </script>
    </body>
</html>

注意事项 #

• webkitdirectory属性是Chrome系浏览器的实现，Firefox需要使用mozdirectory，可以同时添加以兼容更多浏览器：<input type="file" id="fileSelect" webkitdirectory mozdirectory directory>。
• FileSystem Access API仅在HTTPS环境或本地开发环境（localhost）中可用，普通HTTP环境会被浏览器阻止。

内容的提问来源于stack exchange，提问作者Ntovto