Question

上下文

您好，我想列出一个文件夹中的所有文件，因此我首先考虑使用PHP scandir()函数在 php 中进行操作，结果如下：

<?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或所有著名的电影相关网站所做的一样

Answer 1

鉴于您对制作类似于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>

Answer 2

浏览器无法读取用户的文件。但是，使用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

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

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

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

node ./my-code.js

Answer 3

否，除非您运行节点服务器。

您可以做的是，在HTML内打印$a或$b，如下所示：

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

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

Answer 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;

如何使用Javascript

上下文

问题

4 个答案: