Question

我需要Javascript代码来检索驻留在代码已知目录中的图像文件名列表（填充数组）。该目录位于“服务器端”，因此没有“沙盒”规则适用，但没有实际的服务器运行，所以我无法使用实际的服务器调用（这只是一个基于浏览器的应用程序，我可以显示我拍摄的照片）。

浏览器可以访问这些文件，我当前的程序只使用我手动输入文件名的数组，以便在需要时显示图像。我只需要通过代码动态填充此数组，而不是由我手动填充，因为目录中的文件经常更改。

该程序使用Javascript，因为图片的主题在文件名中编码为4个字母的代码，程序显示文件名包含相应代码的图像。

澄清 - 这基本上是我编写的在家用电脑上运行的程序。它使用HTML，Javascript和Jquery来显示在我的计算机上找到的信息。此时，Internet无法访问它，因此不存在“服务器”。我将其列为服务器端仅仅因为对类似问题的所有响应立即转到关于文件访问的“浏览器沙箱”问题。该程序允许我索引我拥有的照片，只需点击一个按钮就可以显示特定人物，地点或动物的所有图像。
感谢

Answer 1

javascript无法扫描服务器上的目录

php（或其他服务器端语言）+ javascript是动态文件列表的唯一解决方案

这里有一个简单的php + js（ajax，json＆lt; -theproperway）示例

images.html //适用于大多数现代浏览器。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>show images</title>
<script>
var
x=function(a,b,c){c=new XMLHttpRequest;c.open('GET',a);c.onload=b;c.send()},
display=function(){
 var myimages=JSON.parse(this.response);
 //now here u can show your images
 //myimages[0] is the first image....
}
window.onload=function(){
x('images.php',display);
}
</script>
</head>
<body>
</body>
</html>

images.php // php 5

<?php
$a=json_encode(glob("path/{*.gif,*.jpg,*.png}", GLOB_BRACE));
header('Content-Type: application/json');
header('Content-Length: '.strlen($a));
//header('Access-Control-Allow-Origin: *'); want to acces from crossdomain???
echo $a;
?>

Answer 2

如果您可以使用浏览器访问这些文件，则会在某个地方运行一个服务器，让Internet客户端可以看到该目录。根据服务器支持的内容，您可以直接插入一个服务器端脚本，当客户端“检索”该脚本时，会为其所在的目录执行目录列表，忽略其自己的文件名，然后将该列表作为JSON数组返回。例如，如果您的服务器支持PHP，那么您将使用名为listing.php的文件，内容为：

<?php
  if ($handle = opendir('.')) {
    $files = array();
    while (($entry = readdir($handle)) !== false) {
      // skip dir references and this file
      if($entry==="." || $entry===".." || $entry==="listing.php") continue;
      // add file to the list of files our client will want to care about
      $files[] = $entry;
    }
    // build a JSON-serialized object as response
    echo '{ "files" : [' . implode(',',$files) . ']}';
  }
?>

然后你在页面上使用普通的ajax调用来获取该列表（取决于你最喜欢的JS框架，函数调用会有所不同。纯JS的方法是构建一个XMLHttpRequest对象并打开一个连接为GET对于listing.php），使用众多JSON解释方法之一（最简单的是var fileList = (new Function("return "+xhr.resonseText+";"))().files）将您获得的JSON序列化字符串转换为普通JS对象，然后在其余部分中使用该数组你的代码。

Javascript中的动态文件名列表

2 个答案: