Как вывести список всех файлов в папке, используя Javascript

контекст

Здравствуйте, я хотел бы перечислить все файлы в папке, поэтому я сначала подумал сделать это в 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 или все известные сайты, связанные с фильмами делают

Источник

4 ответа

Браузеры не могут читать такие файлы пользователя. Однако это очень легко (и часто) с использованием 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

Затем сохраните приведенный выше код в файле.js и запустите его с узлом (используя терминал):

node ./my-code.js
Источник

Учитывая ваш комментарий по созданию чего-то похожего на клон Netflix, я бы посоветовал сделать конечную точку PHP, которая экспортирует список файлов в формате JSON. При этом я не предлагаю вам создавать файловый браузер, который позволяет вводить данные пользователем, поскольку во многих случаях это откроет вас для атак через каталоги, и злонамеренный пользователь сможет получить доступ ко всему вашему серверу. Это можно сделать правильно, но это сложно.

Вместо этого, почему бы не иметь базу данных, которая содержит имена файлов, типы, пути, ключевые слова, пути миниатюрных изображений и т. Д. Затем используйте клиентский JavaScript-код для отправки запросов через ajax к сценарию PHP, который обрабатывает доступ к базе данных и полностью контролирует доступ к файлам. Таким образом, когда пользователь нажимает на видео, вы можете затем вызвать другую конечную точку, которая запускает веб-сокет для потоковой передачи видео, и пользователь не может злонамеренно бродить по вашему серверу или загружать / красть ваши видеофайлы напрямую.

Вот пример перечисления некоторых файлов с вашего сервера. Для простоты кода я предполагаю, что 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>

Источник

Нет, если вы не запускаете сервер узла.

что вы можете сделать, это распечатать $a или же $bвнутри HTML это выглядит так:

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

я мог бы быть не точным в использовании echoвы можете распечатать его любым другим способом, используя print или же printr, А также вам может понадобиться дополнительная работа, чтобы напечатать $a как правильный объект js

Источник

Пример 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 будет состоять из двух файлов: один с вашим HTML и Javascript и другой файл для вызова вашего PHP. Ajax предназначен для вызова с событием, например onclick, или вы можете просто вызвать функцию ajax, как показано ниже.

PHP получит содержимое файла и поместит каждое видео в iframe через цикл while. Назовите 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 Call. Он вызывает ваш PHP-файл с этой строкой RequestObject.open("POST", "videos.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;

Источник
Другие вопросы по тегам