如何制作一个html文件，列出其目录中的文件

How can I make an html file that lists files in its directory?

本文关键字：文件 html 一个 何制作      更新时间：2023-09-26

这是我正在处理的问题：

很少有windows程序能以正确的帧速率显示动画.gif图像。可能是因为他们都使用windows库（可能是.net）来做到这一点，任何试图在IE中查看动画gif并发现它播放得太慢的人都知道微软在这方面失败了。

网络浏览器Chrome是为数不多的总是以正确的帧速率播放动画gif的窗口程序之一，因此我的解决方案是创建一个独立的html文档，在Chrome中打开，该文档可以放在一个目录中，然后在Chrome中开放，从而以图片查看器样式显示该目录和/或其子目录中的所有图像。

到目前为止，我的文档（gif_view.html）打开了一个基于硬编码路径/文件名的图像，用上/下键放大/缩小该图像，并用左右键切换到其他硬编码图像。

我想要的是这些图像文件名不要硬编码。gif_view.html应该使用一个脚本来找出我放置它的目录中有哪些图像和子目录，并使用箭头键在它们之间来回循环。它还应该最终创建一个子目录列表，并让查看器浏览它们。

不幸的是，我无法让它自己做这两件事，因为（出于安全原因）JavaScript无法查找目录的内容。

有人知道这样做的方法吗？也许是另一种处理左右键的脚本语言？或者有没有一种方法可以用JS以编程方式读取我错过的目录？还是微软终于发布了一个补丁或其他东西来解决帧速率问题？

请记住：这应该是一个独立的文件，没有外部依赖关系。用户应该能够直接进入一个文件夹，用浏览器打开它，然后观看魔术的发生。如果您的解决方案涉及文档本身之外的任何内容（比如安装Apache和一些服务器端脚本来读取文件），那么它就不是一个解决方案。我自己已经试过了。这样的外部解决方案是可行的，但由于各自的原因，它们都非常笨拙。

如果有人有想法，我将不胜感激。

使用Chrome的目录上传功能，这很简单。首先，在文件的HTML代码中放入一个文件选择字段：

<input type="file" id="file_input" webkitdirectory="" directory="">

然后，当用户使用它选择一个文件夹时，你可以阅读这样的内容：

document.getElementById('file_input').addEventListener('change',function(e){
    var gifs=e.target.files;
    [].forEach.call(gifs,function(curGif){
        var elt=document.createElement('img');
        elt.setAttribute('src',(webkitURL||URL).createObjectURL(curGif));
        document.body.appendChild(elt);
    });
},false);

这并不是所有关于箭头的花哨的东西，但它很有效：http://jsfiddle.net/markasoftware/m65u7/1/

相关文章：