如何在 JavaScript 数组中获取特定目录中文件的所有路径

Question

假设我们有一个具有此地址的网站：并且我们内部有一个目录，如下所示：https://example.comhttps://example.com/directory

这就是我们所知道的，我们不知道文件夹内有什么文件夹。directory

如何获取文件夹内文件的所有路径并将结果传递给 javascript 数组：directory

期望的结果在 java 脚本中是这样的：

let paths = [

'https://example.com/directory/audio/song_1.mp3',

'https://example.com/directory/audio/song_2.mp3',

'https://example.com/directory/picture/image_1.png',

'https://example.com/directory/picture/image_2.jpg',

'https://example.com/directory/movie/clip.mp4',

];

我已经在网上尝试了所有可能的解决方案，但似乎没有帮助，我找不到一个可行的解决方案。

比我测试的文件夹高一级.php：directory

    <?php

    function getDirContents($dir, &$results = array()){

        $files = scandir($dir);

        foreach($files as $key => $value){

            $path = realpath($dir.DIRECTORY_SEPARATOR.$value);

            if(!is_dir($path)) {

                $results[] = $path;

            } else if($value != "." && $value != "..") {

                getDirContents($path, $results);

                $results[] = $path;

            }

        }

        return $results;

    }

echo json_encode(getDirContents('directory'));

它返回如下结果：

“/存储/ssd4/693/8074693/public_html/目录/音频/song_1.mp3” [3]=>字符串（72） “/存储/ssd4/693/8074693/public_html/目录/音频/song_2.mp3” [4]=>字符串（72） “/存储/ssd4/693/8074693/public_html/目录/图片/image_1.png” [5]=>字符串（75） “/存储/ssd4/693/693/8074693/public_html/public_html/图片/image_2.jpg” [6]=>字符串（61） “/存储/ssd4/693/8074693/public_html/目录/电影/剪辑.mp4” [7]=>字符串（73）

由于@马蒙·奥斯曼的爪哇脚本代码：

$(document).ready( function() {

        $.ajax({

            type: 'POST',

            url: '../test.php',

            data: 'id=testdata',

            dataType: 'json',

            cache: false,

            success: function(result) {

                console.log(result)

            },

        });

});

我在 的另一个文件夹中有脚本.js.js和索引.html。https://example.com/script

我可以使用ajax调用记录PHP，但仍然，我得到系统文件路径而不是相应的URL！$results

Answer 1

而不是使用 ，获取目录中所有路径的唯一方法是使用PHP循环文件并将输出返回为JSON或XML（或者可能是文本，但随后您必须解析它），JSON是您的情况下要走的路，您所要做的就是使用Ajax请求此php脚本的路径：var_dump()json_encode(getDirContents('directory'))<?phpfunction getDirContents($dir, &$results = array()){&nbsp; &nbsp; $files = array_diff(scandir($dir), array('..', '.'));;&nbsp; &nbsp; foreach($files as $key => $value){&nbsp; &nbsp; &nbsp; &nbsp; $path = $dir.DIRECTORY_SEPARATOR.$value;&nbsp; &nbsp; &nbsp; &nbsp; if(is_dir($path)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; getDirContents($path, $results);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // change this to https if you have HTTPS&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // or have it as a variable like this :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // $protocol = ((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $directory_path = basename($_SERVER['REQUEST_URI']);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $results[] =&nbsp; 'http://' . $_SERVER['SERVER_NAME'] . str_replace($directory_path, "", $_SERVER['REQUEST_URI']) .$path;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; return $results;}echo json_encode(getDirContents('directory'));对于阿贾克斯呼叫：$(document).ready(function() {&nbsp; $.ajax({&nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; url: '../test.php',&nbsp; &nbsp; data: 'id=testdata',&nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; cache: false,&nbsp; &nbsp; success: function(result) {&nbsp; &nbsp; &nbsp; console.log(result)&nbsp; &nbsp; },&nbsp; });});

Answer 2

这有点太晚了，但也许对于将来的某个人来说。我用这个JS代码得到了我所有的文件路径。let htmlContainer = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;fetch("http://192.168.0.9:5500/assets/img/gallery/project-1", {&nbsp; &nbsp; &nbsp; &nbsp; headers : {&nbsp;&nbsp; &nbsp; &nbsp; 'Content-Type': 'text/html',&nbsp; &nbsp; &nbsp; 'Accept': 'text/html',&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;}}).then(response => response.text())&nbsp; &nbsp; .then((stringHtml) => {&nbsp; &nbsp; &nbsp; &nbsp; htmlContainer.innerHTML = stringHtml;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //convert plain text to Html to have&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//acces to its elements&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; //htmlContainer will containe html representation&nbsp; &nbsp; &nbsp; &nbsp; //of our project diretories and files, so from there&nbsp; &nbsp; &nbsp; &nbsp; //will be able to get files paths&nbsp; &nbsp; &nbsp; &nbsp;console.log( Array.from(htmlContainer&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .querySelector('#files')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .querySelectorAll("li>a"))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .map( x => x.getAttribute('href'))) //will print an array&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //with all file and direcotory paths in our directory&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; })