如何仅使用 HTML 和 Javascript 在本地网页上显示文件夹列表? [关闭]

     2023-02-21     128

关键词:

【中文标题】如何仅使用 HTML 和 Javascript 在本地网页上显示文件夹列表? [关闭]【英文标题】:How can I display a list of folders on a local webpage by only using HTML and Javascript? [closed] 【发布时间】:2018-05-25 13:34:24 【问题描述】:

这是我的第一个问题。

基本上,我要做的是在我的 index.html 页面上显示本地文件夹列表,但是我不确定如何执行此操作。例如,假设我有一个音乐专辑列表:

folder: Good Charlotte
song.mp3
folder: A Day To Remember
song2.mp3
folder: Green Day
song3.mp3

我想做的是在 html 页面上显示每个文件夹,然后还可以单击每个文件夹来访问文件夹中的文件。

非常感谢您提前提供的帮助,如果您需要更多详细信息,请随时告诉我。

【问题讨论】:

你需要服务器端代码。 您好,感谢您的回复。主要问题是我什至不知道该怎么做,我在这里浏览了答案,找不到答案,所以我自己问了一个问题。 您需要使用服务器上可用的任何编程语言来读取目录并输出数据或生成所需的html 如果“本地”是指“托管您网站的网络服务器的本地”,那么您需要学习服务器端编程语言(而且您的问题太广泛了)。如果您的意思是“运行浏览器的计算机本地”,那么您不能这样做。 Node.js(服务器上的 js)使您能够读取目录的内容 nodejs.org/api/fs.html#fs_fs_readdir_path_options_callback 【参考方案1】:

执行此操作的最快和最简单的方法是简单地使用您的网络服务器中列出的默认文件和文件夹。

既然你问这个问题,我怀疑它可能没有启用。以下是如何启用它:

IIS(Windows):

appcmd 设置配置 /section:directoryBrowse /enabled:true|false

或使用用户界面。见这里:https://technet.microsoft.com/en-us/library/cc731109(v=ws.10).aspx

阿帕奇(Linux):

Alias /icons/ "/var/www/icons/"

<Directory "/var/www/icons">
    Options Indexes MultiViews
    AllowOverride None
    Require all granted
</Directory>

请看这里:How to enable directory listing in apache web server

样式化输出

我还偶然发现了这个网页,该网页教授如何使用 PHP 和 CSS 以自己的方式输出。 https://css-tricks.com/snippets/php/display-styled-directory-contents/

  <?php
    // Opens directory
    $myDirectory=opendir(".");

    // Gets each entry
    while($entryName=readdir($myDirectory)) 
      $dirArray[]=$entryName;
    


    // Loops through the array of files
    for($index=0; $index < $indexCount; $index++) 
         // ...
    

【讨论】:

仅使用 javascript 和 html 以具有跨浏览器功能的 html 音频录制

】仅使用javascript和html以具有跨浏览器功能的html音频录制【英文标题】:audiorecordinginhtmlwithcrossbrowsercapabilityusingonlyjavascriptandhtml【发布时间】:2014-01-2913:10:28【问题描述】:可以帮助我录制音频文件以在所有浏览器中获取音频文... 查看详情

如何使用 C# 执行 HTML 文件的所有 Javascript 以仅生成 HTML DOM

】如何使用C#执行HTML文件的所有Javascript以仅生成HTMLDOM【英文标题】:HowtoExecuteallJavascriptofHTMLFiletoproducejustHTMLDOMusingC#【发布时间】:2021-12-2716:30:18【问题描述】:我有一个html文件,它几乎不包含任何HTML元素,因为它只有许多丑... 查看详情

没有 Javascript 的响应式导航栏,仅使用 HTML 和 CSS

】没有Javascript的响应式导航栏,仅使用HTML和CSS【英文标题】:ResponsivenavigationbarwithoutJavascript,usingonlyHTMLandCSS【发布时间】:2021-12-3006:18:26【问题描述】:让我的导航栏响应时遇到了问题。我知道我需要使用媒体查询,但我是一... 查看详情

如何在 Javascript 中获取 HTML 标记内的内容(仅)到单级?

】如何在Javascript中获取HTML标记内的内容(仅)到单级?【英文标题】:Howtogetcontent(only)insideHTMLtagup-tosinglelevelinJavascript?【发布时间】:2019-11-1010:13:47【问题描述】:TLDR:这个问题需要javascript解决方案SearchandreplaceHTMLText,nottags我... 查看详情

如何仅使用 JavaScript 正确读取 json 文件 [重复]

】如何仅使用JavaScript正确读取json文件[重复]【英文标题】:HowtoreadjsonfilecorrectlyusingonlyJavaScript[duplicate]【发布时间】:2019-10-2716:46:47【问题描述】:我需要创建HTML选择器并从JSON中获取它们的值,我创建了JSON并尝试通过在html文... 查看详情

仅使用 HTML/JavaScript 创建购物车

】仅使用HTML/JavaScript创建购物车【英文标题】:CreatingaShoppingCartusingonlyHTML/JavaScript【发布时间】:2013-04-2400:34:51【问题描述】:我不知道该怎么做才能完成这个项目。我需要创建一个只使用一个HTML页面的购物车。我已经设置了... 查看详情

我如何仅使用htmlcss和javascript将squarepaymentgateway嵌入网站中?没有框架&&没有其他语言

...器中。而且我在那里不能使用任何框架。只是HTML,CSS,JavaScript,jQuery硬编码。没有PHP,没有Python。这是github链接:https://github.com/square/sqpaymentform-nodejs-starterkit我试图重新更正node.js代码,并将其仅转换为Ja 查看详情

仅使用 HTML、CSS 和 Javascript 进行视频编辑 [关闭]

】仅使用HTML、CSS和Javascript进行视频编辑[关闭]【英文标题】:VideoEditingusingHTML,CSSandJavascriptOnly[closed]【发布时间】:2014-04-2208:36:01【问题描述】:我只需要使用HTML5和Javascript编辑视频。没有flash或ffmpeg。我需要添加标题板、背景... 查看详情

如何仅使用 HTML5 功能使画布移动?

...矩形。如何使用可拖动属性将其移动到特定区域?还使用Javascript如何添加监听器?等待帮助。这是我的代码:在Javascript文件中:varc=document.getElementById("rec 查看详情

如何仅使用 vanilla JavaScript 和 Node-API 将多个 div 元素包装在另一个元素节点周围?

】如何仅使用vanillaJavaScript和Node-API将多个div元素包装在另一个元素节点周围?【英文标题】:Howdoesonewrapmultiplediv-elementsaroundanotherelement-nodeusingvanillaJavaScriptandtheNode-APIonly?【发布时间】:2021-11-1418:22:18【问题描述】:我使用的是... 查看详情

HTML5 和 Javascript 仅在可见时播放视频

】HTML5和Javascript仅在可见时播放视频【英文标题】:HTML5andJavascripttoplayvideosonlywhenvisible【发布时间】:2014-02-0511:26:03【问题描述】:我有兴趣设置一个包含多个视频剪辑的HTML页面,以便每个视频剪辑仅在可见时播放,然后在不... 查看详情

如何在没有 CSS 且仅使用 JavaScript 或 jQuery/jQueryMobile 的情况下更改设备方向?

】如何在没有CSS且仅使用JavaScript或jQuery/jQueryMobile的情况下更改设备方向?【英文标题】:HowtochangedeviceorientationwithoutCSSandonlywithJavaScriptorjQuery/jQueryMobile?【发布时间】:2017-02-0320:54:32【问题描述】:我有以下HTML结构:<divdata-rol... 查看详情

如何使用 html 和 javascript 在网页上自动播放声音

】如何使用html和javascript在网页上自动播放声音【英文标题】:Howtoautoplaysoundonwebpagewithhtmlandjavascript【发布时间】:2021-02-1122:25:30【问题描述】:我正在构建一个测验应用程序,基本上,我希望在用户进入网页开始播放测验时开... 查看详情

如何仅使用 CSS 制作标签? [复制]

...换不同的面板以查看不同的内容:但是,我需要在不使用javascript的情况下完成此操作,以便未启用javascript的用户可以轻松使用该站点。此外,我想避免导航到不同的静态html页 查看详情

如何仅使用 ajax 和 javascript 连接到 mysql 数据库?

】如何仅使用ajax和javascript连接到mysql数据库?【英文标题】:Howtoconnecttomysqldatabaseusingonlyajaxandjavascript?【发布时间】:2011-10-0521:03:26【问题描述】:我正在尝试使用使用户登录的电话间隙制作应用程序。我知道如何使用php连接... 查看详情

如何仅使用 CSS 和 HTML 约束动画?

】如何仅使用CSS和HTML约束动画?【英文标题】:HowdoIconstraintananimationusingonlyCSSandHTML?【发布时间】:2016-02-2310:01:14【问题描述】:对于一个学校项目,我正在按照本教程进行Pong游戏:http://www.sitepoint.com/css3-pong-insane-things-to-do-with... 查看详情

如何使用 HTML 5 仅播放 Youtube 视频的音频?

...间】:2012-01-3104:38:28【问题描述】:是否可以使用HTML5和Javascript仅播放YouTube视频中的音频?【问题讨论】:youtube提供视频,因此只有视频从他们的服务器流式传输,除非他们有一个不太可能的纯音频选项。【参考方案1】:嵌入... 查看详情

如何使用 VueJS 或仅使用 javascript 在多维数组中搜索

】如何使用VueJS或仅使用javascript在多维数组中搜索【英文标题】:HowtosearchinamultidimensionalarrayusingVueJSorjustjavascript【发布时间】:2017-10-2401:26:00【问题描述】:我正在做一个Vue项目,我只是VueJS的新手,我的问题是当我输入一个值... 查看详情