/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：遍历本地(服务器端)文件夹的所有元素所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）