如何在 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'))

<?php

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

    $files = array_diff(scandir($dir), array('..', '.'));;

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

        $path = $dir.DIRECTORY_SEPARATOR.$value;

        if(is_dir($path)) {

          getDirContents($path, $results);

        } else {

          // change this to https if you have HTTPS

          // or have it as a variable like this :

          // $protocol = ((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";

          $directory_path = basename($_SERVER['REQUEST_URI']);

          $results[] =  'http://' . $_SERVER['SERVER_NAME'] . str_replace($directory_path, "", $_SERVER['REQUEST_URI']) .$path;

        }

    }

    return $results;

}

echo json_encode(getDirContents('directory'));

对于阿贾克斯呼叫：

$(document).ready(function() {

  $.ajax({

    type: 'POST',

    url: '../test.php',

    data: 'id=testdata',

    dataType: 'json',

    cache: false,

    success: function(result) {

      console.log(result)

    },

  });

});

Answer 2

这有点太晚了，但也许对于将来的某个人来说。

我用这个JS代码得到了我所有的文件路径。

let htmlContainer = document.createElement('div');                  

fetch("http://192.168.0.9:5500/assets/img/gallery/project-1", {

        headers : { 

      'Content-Type': 'text/html',

      'Accept': 'text/html',

      

     }

}).then(response => response.text())

    .then((stringHtml) => {

        htmlContainer.innerHTML = stringHtml;            //convert plain text to Html to have   

                                                         //acces to its elements

                                                         

        //htmlContainer will containe html representation

        //of our project diretories and files, so from there

        //will be able to get files paths

       console.log( Array.from(htmlContainer

                            .querySelector('#files')

                                .querySelectorAll("li>a"))

                                    .map( x => x.getAttribute('href'))) //will print an array

                                                                        //with all file and direcotory paths in our directory

        

    })