HTMLJavascript:遍历本地(服务器端)文件夹的所有元素

HTMLJavascript:遍历本地(服务器端)文件夹的所有元素,第1张

概述基本上,我有一个非常简单的网站,其根目录如下所示: /images/index.htmlstuff.js 我想通过某种方式递归遍历/ images /目录中的每个文件,并按照我网站的一部分顺序显示它们.例如,如果/ images /包含: images/a/a.pngimages/b.pngimages/c.jpg.... 然后index.html中的某个地方将包含: <img src= 基本上,我有一个非常简单的网站,其根目录如下所示:

/images/index.HTMLstuff.Js

我想通过某种方式递归遍历/ images /目录中的每个文件,并按照我网站的一部分顺序显示它们.例如,如果/ images /包含:

images/a/a.pngimages/b.pngimages/c.jpg....

然后index.HTML中的某个地方将包含:

<img src="images/a/a.png" /><img src="images/b.png" /><img src="images/c.jpg" />....

我的第一个想法是使用stuff.Js中的document.write()函数执行此 *** 作,但我找不到在JavaScript中迭代本地文件目录的好方法.我看到了一些关于AJAX的内容,但所有这些示例都涉及编辑现有文件,我显然不想这样做.

我目前的解决方案只是手动创建一个包含/ images /中所有文件的字符串数组,但这样做让我觉得“必须有更好的方法!”

如果我不清楚,请告诉我.

谢谢!

解决方法 也许最好的方法是使用服务器端语言为您执行此 *** 作,并使用异步JavaScript请求来显示数据.

此示例使用PHP列出指定目录中的所有文件,使用xmlhttprequest加载此输出并将结果转换为图像标记:

getimages.PHP:

<?PHP    //The directory (relative to this file) that holds the images    $dir = "Images";    //This array will hold all the image addresses    $result = array();    //Get all the files in the specifIEd directory    $files = scandir($dir);    foreach($files as $file) {        switch(ltrim(strstr($file,'.'),'.')) {            //If the file is an image,add it to the array            case "jpg": case "jpeg":case "png":case "gif":                $result[] = $dir . "/" . $file;        }    }    //Convert the array into JsON    $resultJson = Json_encode($result);    //Output the JsON object    //This is what the AJAX request will see    echo($resultJson);?>

index.HTML(与getimages.PHP相同的目录):

<!DOCTYPE HTML><HTML>    <head>        <Title>Image List Thing</Title>    </head>    <body>        <div ID="images"></div>        <input type="button" onclick="callForImages()" value="Load" />        <script>            //The div element that will contain the images            var imageContainer = document.getElementByID("images");            //Makes an asynch request,loading the getimages.PHP file            function callForImages() {                //Create the request object                var httpReq = (window.XMLhttpRequest)?new XMLhttpRequest():new ActiveXObject("Microsoft.XMLhttp");                //When it loads,httpReq.onload = function() {                    //Convert the result back into JsON                    var result = JsON.parse(httpReq.responseText);                    //Show the images                    loadImages(result);                }                //Request the page                try {                    httpReq.open("GET","getimages.PHP",true);                    httpReq.send(null);                } catch(e) {                    console.log(e);                }            }            //Generates the images and sticks them in the container            function loadImages(images) {                //For each image,for(var i = 0; i < images.length; i++) {                    //Make a new image element,setting the source to the source in the array                    var newImage = document.createElement("img");                    newImage.setAttribute("src",images[i]);                    //Add it to the container                    imageContainer.appendChild(newImage);                }            }            </script>    </body></HTML>

请注意,这只是一个例子.您可能希望确保AJAX调用成功,并且JsON转换在服务器代码和客户端上都有效.

总结

以上是内存溢出为你收集整理的HTML / Javascript:遍历本地(服务器端)文件夹的所有元素全部内容,希望文章能够帮你解决HTML / Javascript:遍历本地(服务器端)文件夹的所有元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1042151.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表(0条)

保存