循环浏览本地文件夹并动态创建元素
Posted
技术标签:
【中文标题】循环浏览本地文件夹并动态创建元素【英文标题】：Loop through local folder & dynamically create elements 【发布时间】：2018-07-28 06:44:36 【问题描述】：我想制作一个 jquery-ui 选项卡菜单，每个选项卡上包含 54 个图像。我在一个文件夹中有 880 个图像，并且为每个图像使用 <img> 需要很长时间。我可以循环浏览每一个并将它们动态附加到选项卡吗？这就是我想要一个标签的样子。
img
width: 35px;
height: 35px;
#tabs
width: 420px;
height: 300px;
.ui-tabs .ui-tabs-nav .ui-tabs-anchor
float: left;
padding: .1em .175em;
text-decoration: none;
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
img
width: 35px;
height: 35px;
#tabs
width: 420px;
height: 300px;
.ui-tabs .ui-tabs-nav .ui-tabs-anchor
float: left;
padding: .1em .175em;
text-decoration: none;
</style>
<script>
$( function()
$( "#tabs" ).tabs();
);
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">1</a></li>
<li><a href="#tabs-2">2</a></li>
<li><a href="#tabs-3">3</a></li>
<li><a href="#tabs-4">4</a></li>
<li><a href="#tabs-5">5</a></li>
<li><a href="#tabs-6">6</a></li>
<li><a href="#tabs-7">7</a></li>
<li><a href="#tabs-8">8</a></li>
<li><a href="#tabs-9">9</a></li>
<li><a href="#tabs-10">10</a></li>
<li><a href="#tabs-11">11</a></li>
<li><a href="#tabs-12">12</a></li>
<li><a href="#tabs-13">13</a></li>
<li><a href="#tabs-14">14</a></li>
<li><a href="#tabs-15">15</a></li>
<li><a href="#tabs-16">16</a></li>
<li><a href="#tabs-17">17</a></li>
</ul>
<div id="tabs-1">
<img src="emojis-master/100.png"/>
<img src="emojis-master/1234.png"/>
<img src="emojis-master/8ball.png"/>
<img src="emojis-master/a.png"/>
<img src="emojis-master/ab.png"/>
<img src="emojis-master/abc.png"/>
<img src="emojis-master/abcd.png"/>
<img src="emojis-master/accept.png"/>
<img src="emojis-master/aerial_tramway.png"/>
<img src="emojis-master/airplane.png"/>
<img src="emojis-master/alarm_clock.png"/>
<img src="emojis-master/alien.png"/>
<img src="emojis-master/ambulance.png"/>
<img src="emojis-master/anchor.png"/>
<img src="emojis-master/angel.png"/>
<img src="emojis-master/anger.png"/>
<img src="emojis-master/angry.png"/>
<img src="emojis-master/anguished.png"/>
<img src="emojis-master/ant.png"/>
<img src="emojis-master/apple.png"/>
<img src="emojis-master/aquarius.png"/>
<img src="emojis-master/aries.png"/>
<img src="emojis-master/arrow_backward.png"/>
<img src="emojis-master/arrow_double_down.png"/>
<img src="emojis-master/arrow_double_up.png"/>
<img src="emojis-master/arrow_down.png"/>
<img src="emojis-master/arrow_down_small.png"/>
<img src="emojis-master/arrow_forward.png"/>
<img src="emojis-master/arrow_heading_down.png"/>
<img src="emojis-master/arrow_heading_up.png"/>
<img src="emojis-master/arrow_left.png"/>
<img src="emojis-master/arrow_lower_left.png"/>
<img src="emojis-master/arrow_lower_right.png"/>
<img src="emojis-master/arrow_right.png"/>
<img src="emojis-master/arrow_right_hook.png"/>
<img src="emojis-master/arrow_up.png"/>
<img src="emojis-master/arrow_up_down.png"/>
<img src="emojis-master/arrow_up_small.png"/>
<img src="emojis-master/arrow_upper_left.png"/>
<img src="emojis-master/arrow_upper_right.png"/>
<img src="emojis-master/arrows_clockwise.png"/>
<img src="emojis-master/arrows_counterclockwise.png"/>
<img src="emojis-master/art.png"/>
<img src="emojis-master/articulated_lorry.png"/>
<img src="emojis-master/atm.png"/>
<img src="emojis-master/b.png"/>
<img src="emojis-master/baby.png"/>
<img src="emojis-master/baby_bottle.png"/>
<img src="emojis-master/baby_chick.png"/>
<img src="emojis-master/back.png"/>
<img src="emojis-master/bad.png"/>
<img src="emojis-master/baggage_claim.png"/>
<img src="emojis-master/balloon.png"/>
<img src="emojis-master/ballot_box_with_check.png"/>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
<div id="tabs-5">
</div>
<div id="tabs-6">
</div>
<div id="tabs-7">
</div>
<div id="tabs-8">
</div>
<div id="tabs-9">
</div>
<div id="tabs-10">
</div>
<div id="tabs-11">
</div>
<div id="tabs-12">
</div>
<div id="tabs-13">
</div>
<div id="tabs-14">
</div>
<div id="tabs-15">
</div>
<div id="tabs-16">
</div>
<div id="tabs-17">
</div>
</div>
</body>
</html>提前致谢。我需要写这个，否则我不能发布这个问题，因为我有很多代码。忽略这部分。
【问题讨论】：
我有java...也许我应该使用它？ @Occam'sRazor 好的，java 可以工作。我建议在后端编写一个脚本来创建一个包含每个文件名的 JSON 文件，然后 ajax 并循环它。 看看tabs: external content via Ajax @gaetanoM 这比我的建议更好。不错！ Is there a way to return a list of all the image file names from a folder using only javascript?的可能重复 【参考方案1】：如果您的文件位于服务器上并且您想要动态填充 HTML 文件，或者如果您的文件位于常规（非服务器）设备上，您将需要一个服务器端解决方案，您需要运行一些文件操作。不幸的是，这两个选项都不能在浏览器环境中使用。
在服务器端，您可以使用 php scandir() 方法或 Node.js fs.readdir() 方法将文件列表作为文本转储到您的页面，例如插入 JavaScript 变量列表或 URL 数组.或者您可以使用其中之一来编译您的文件或文件结构的 JSON 表示，并将 AJAX 编译到您的应用程序中。
在非服务器环境中，我建议使用命令行ls function 创建文件列表以供在应用程序中使用，或者通常在突出显示所有文件时，Ctrl+C 复制并粘贴将其转换为文本文档，您将获得一个列表文件地址，可以轻松地将其转换为 JavaScript 数组或 JSON 文件。就我个人而言，我会考虑走 JSON 路线。
您可能还会发现这些链接很有用...
节点：directory listing to JSON PHP：directory listing to JSON Python：directory listing to JSON;)
【讨论】：
以上是关于循环浏览本地文件夹并动态创建元素的主要内容，如果未能解决你的问题，请参考以下文章