如何使用 PHP/jQuery 列出文件夹中的所有文件答案

【问题标题】：How to list all files in a folder using PHP/jQuery如何使用 PHP/jQuery 列出文件夹中的所有文件
【发布时间】：2019-01-12 18:06:20
【问题描述】：

上下文

您好，我想列出一个文件夹中的所有文件，所以我首先考虑在 php 中使用 PHP scandir() 函数来完成它，结果是这样的：

<?php
$dir = "/images/";

// Sort in ascending order - this is default
$a = scandir($dir);

// Sort in descending order
$b = scandir($dir,1);

print_r($a);
print_r($b);
?>

结果：

Array
(
[0] => .
[1] => ..
[2] => film1.mkv
[3] => film2.mkv
[4] => film3.mkv
[5] => film4.mkv
)
Array
(
[0] => film4.mkv
[1] => film3.mkv
[2] => film2.mkv
[3] => film1.mkv
[4] => ..
[5] => .
)

但后来我意识到，因为我想扫描我文件夹中的所有视频以显示它们并让本地用户选择点击其中的任何一个；使用 JavaScript 可能是个好主意。

问题

是否可以在 Javascript 中做到这一点？用它代替 php 是个好主意吗？

编辑：这样做的最终目的是推出一部电影，就像 Netflix 或所有著名的电影相关网站正在做的那样

【问题讨论】：

give the choice to the local user to clic on any of them -- 预期目的是什么？他们点击文件名后应该发生什么？
预期目的是推出一部电影，类似于 Netflix
您不能这样做，因为 Javascript 仅用于通过您的浏览器运行，并且访问您的系统和文件夹将是一个巨大的安全问题。如果你想在本地做类似的事情，你可以运行一个 node.js 服务器（本质上是 javascript 服务器）
您的 (php) 服务器应该为您的客户端（网站/用 js 编写）提供一种 api 来提供这些文件/视频。当然你也可以使用节点服务器
谢谢你的回答，我忘了说，但我最初的目的只是让它像使用 WAMP 甚至只使用浏览器一样在本地运行

标签： php jquery directory scandir

【解决方案1】：

浏览器不能像那样读取用户的文件。然而，使用 Node 和内置的“fs”模块，这非常容易（并且很常见）。

const { readdirSync } = require('fs');

const PATH_TO_YOUR_FOLDER = '/Users/me/Downloads';

console.log(readdirSync(PATH_TO_YOUR_FOLDER));
// output: array of the file names in my downloads directory

您需要安装节点： https://nodejs.org/en/

这是 fs 文档： https://nodejs.org/api/fs.html#fs_fs_readdirsync_path_options

然后将上面的代码保存在 .js 文件中，并用 node 运行它（使用终端）：

node ./my-code.js

【讨论】：

感谢您的帮助！我会解决这个问题，稍后再给你一些反馈；）

【解决方案2】：

鉴于您对制作类似于 Netflix 克隆的内容的评论，我的建议是制作一个 PHP 端点，将文件列表导出为 JSON。话虽如此，我不建议您构建一个允许用户输入的文件浏览器，因为在许多情况下，这会使您面临目录遍历攻击，并且恶意用户可能能够访问你的整个服务器。它可以正确完成，但是很棘手。

相反，为什么不拥有一个包含文件名、类型、路径、关键字、缩略图路径等的数据库。然后使用客户端 javascript 通过 ajax 向 PHP 脚本发出请求，该脚本处理数据库访问并完全控制文件访问。这样，当用户点击视频时，您可以调用另一个端点来启动 websocket 进行视频流式传输，并且用户不会恶意在您的服务器中游荡或直接下载/窃取您的视频文件。

这是列出服务器中一些文件的示例。为了代码简单起见，我在这里假设使用 jQuery，但您可以使用其他库或原生 XMLHttpRequest 对象：

$.ajax({
    url: '/movies/list-all.php',
    method: 'GET',
    dataType: 'json'
}).done(function(data) {
    if (typeof data === 'object' && typeof data !== null) {
        // List the movies
        for(var movie in data.movies) {
            var movieDiv = '<div class="movie-item" data-id="' + movie.id + '">' +
                '<img src="' + movie.thumbnail_path + '"><br>' +
                '<p>' + movie.title + '</p>' +
                '</div>';
            $('#my-container-div').append(movieDiv);
        }
    }
});

用于列出电影的示例 PHP 端点：

<?php

    /**
     * list-all.php
     *
     * Assumes you have a PDO database connection setup already here as $db.
     */

    $stmt = $db->query("SELECT * FROM movies");
    if ($stmt instanceof PDOStatement) {
        $movies = $stmt->fetchAll();
        $response = (object) [
            'total'  => count($movies),
            'movies' => $movies,
        ];
    } else {
        $response = (object) [
            'total' => 0,
            'movies' => [],
        ]
    }

    header('Content-Type: application/json');
    echo(json_encode($response));

演示（有点）：

var movieData = {
  count: 3,
  movies: [{
      id: 1,
      title: "Movie A",
      thumb: "https://via.placeholder.com/150"
    },
    {
      id: 2,
      title: "Movie B",
      thumb: "https://via.placeholder.com/150"
    },
    {
      id: 3,
      title: "Movie C",
      thumb: "https://via.placeholder.com/150"
    },
  ]
};

$(document).ready(function() {

  if (typeof movieData === 'object' && typeof movieData !== null) {
    // List the movies
    for (var i in movieData.movies) {
      var movie = movieData.movies[i];
      var movieDiv = '<div class="movie-item" data-id="' + movie.id + '">' +
        '<img src="' + movie.thumb + '"><br>' +
        '<p>' + movie.title + '</p>' +
        '</div>';
      $('#movies').append(movieDiv);
    }
  }

});

.movie-item {
  display: inline-block;
  border: 2px solid #DDD;
  margin: 10px;
  text-align: center;
}

.movie-item:hover {
  border: 2px solid #00aaca;
  cursor: pointer;
}

.movie-item p {
  color: #00aaca;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head></head>

<body>
  <h1>Movies</h1>
  <div id="movies"></div>
</body>

</html>

【讨论】：

OP 可能不知道什么是“端点”。但这就是我在评论中想说的:) +1
啊，写我的答案时没有看到新的 cmets。我可以进一步解释并提供任何 OP 不清楚的代码示例。
首先感谢您的回答，我的第一个意图是像在本地从 USB 密钥甚至所有者计算机一样运行它，只是为了在文件夹中很好地显示可用的电影，而不是浏览窗口文件夹，所以我没有打算一天在线上传这个网站
感谢您的更新@Jeremy 我很感激，我必须使用数据库吗？因为我的想法是拥有一个“本地 Netflix”，我可以将它提供给任何可以从 USB 密钥启动的人，然后他们只需将电影放入文件夹中，我的本地网站就可以解决问题（在interface) 当他们点击 index.html 时，你认为这可能吗？

【解决方案3】：

不，除非你运行节点服务器。

你可以做的是，打印$a或$b，在html里面，看起来是这样的：

<html>
  <head>
    <script>
      var files = <?php echo $a ?>
      // then do whatever to display it
  </head>
</html>

我使用echo 可能不准确，欢迎您使用print 或printr 以任何其他方式打印它。而且你可能需要额外的工作才能将$a 打印为正确的 js 对象

【讨论】：

【解决方案4】：

示例 1

PHP 单独获取文件内容。

include 'db.php';// Your DB connection file
$dir = "/images/";
$fi = scandir($dir);
$num_fi = count($fi)-2;
$dh = opendir($dir);
$file = readdir($dh);
$res = "";$i=0;
if (is_dir($dir)){
    if ($dh = opendir($dir)){
        if ($i < $num_fi){

            while (false !== ($file = readdir($dh))){
                 if($file !== "." && $file !== ".." && $file !== ".htaccess" && $file !== "Thumbs.db"){
            $i++;
            echo "<div><iframe src=\"".$dir.$files."\"></iframe><div>" 
            } else {
            echo "<div>No Videos.</div>";
            }
        }
    }   
}
closedir($dh);

示例 2

Ajax 示例将使用 2 个文件，其中一个包含您的 HTML 和 Javascript，另一个文件用于调用您的 PHP。 Ajax 用于调用 onclick 之类的事件，或者您可以像下面这样调用 ajax 函数。

PHP 将获取文件内容并通过 while 循环将每个视频放入 iframe 中。将 PHP 文件 videos.php 命名为与 Ajax 查找的文件相同的名称。

if(isset($_POST['data'])){
include 'db.php';// Your DB connection file
$dir = "/images/";
$fi = scandir($dir);
$num_fi = count($fi)-2;
$dh = opendir($dir);
$file = readdir($dh);
$res = "";$i=0;
if (is_dir($dir)){
if ($dh = opendir($dir)){
if ($i < $num_fi){

while (false !== ($file = readdir($dh))){
if($file !== "." && $file !== ".." && $file !== ".htaccess" && $file !== "Thumbs.db"){
$i++;
$res .= "<div><iframe src=\"".$dir.$files."\"></iframe><div>" 
} else {
$res .= "<div>No Videos.</div>";}
}
}
closedir($dh);
} 
echo $res;

这是 Javascript Ajax 调用。它使用这一行 RequestObject.open("POST", "videos.php") 调用您的 PHP 文件来完成这项工作。

var RequestObject = false;
if (window.XMLHttpRequest) {
  RequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  RequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function chooseVideos() {
  if (RequestObject) {
    RequestObject.open("POST", "videos.php");
    RequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    RequestObject.onreadystatechange = function() {
      if (RequestObject.readyState == 4 && RequestObject.status == 200) {
        document.getElementById('videoPanel').innerHTML = RequestObject.responseText;
      }
    }
    var data = "vidData";
    RequestObject.send("data=" + data);
  }
  return false;
}

chooseVideos();

<form method="post">
  <div id="videoPanel"></div>
</form>

上面是您的 HTML 容器，用于显示 Ajax 调用的结果 document.getElementById('videoPanel').innerHTML = RequestObject.responseText;

【讨论】：

非常感谢您的回答，您认为有没有一种方法可以制作一个有效的片段以便让我更清楚？