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

问题描述 投票:1回答:4

上下文

你好,我想列出一个文件夹中的所有文件,所以我首先考虑使用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或所有著名的电影相关网站所做的一样

php jquery directory scandir
4个回答
3
投票
浏览器无法读取用户的文件。但是,使用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


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>

0
投票
否,除非您运行节点服务器。

0
投票
示例1
© www.soinside.com 2019 - 2024. All rights reserved.