Nhận danh sách tên tệp trong thư mục bằng Javascript

Trang web của tôi đang cung cấp rất nhiều hình ảnh từ /assets/photos/thư mục. Làm cách nào để lấy danh sách các tệp trong thư mục đó bằng Javascript?

Mã hiện tại sẽ cung cấp danh sách tất cả các tệp trong một thư mục, giả sử rằng nó ở phía máy chủ mà bạn muốn liệt kê tất cả các tệp:

var fs = require('fs');
var files = fs.readdirSync('/assets/photos/');

Không, Javascript không có quyền truy cập vào hệ thống tệp. Javascript phía máy chủ là một câu chuyện hoàn toàn khác nhưng tôi đoán bạn không có ý đó.

Tôi viết một tệp dir.php

var files = <?php $out = array();
foreach (glob('file/*.html') as $filename) {
    $p = pathinfo($filename);
    $out[] = $p['filename'];
}
echo json_encode($out); ?>;

Trong tập lệnh của bạn, hãy thêm:

<script src='dir.php'></script>

và sử dụng mảng tệp []

Đối với tệp phía máy khách, bạn không thể lấy danh sách tệp trong thư mục cục bộ của người dùng.

Nếu người dùng đã cung cấp các tệp đã tải lên, bạn có thể truy cập chúng thông qua inputphần tử của họ .

<input type="file" name="client-file" id="get-files" multiple />


<script>
var inp = document.getElementById("get-files");
// Access and handle the files 

for (i = 0; i < inp.files.length; i++) {
    let file = inp.files[i];
    // do things with file
}
</script>

Để có được danh sách các tên tệp trong một thư mục cụ thể, bạn có thể sử dụng:

fs.readdir(directory_path, callback_function)

Thao tác này sẽ trả về một danh sách mà bạn có thể phân tích cú pháp bằng cách lập chỉ mục danh sách đơn giản như file[0],file[1], v.v.

Tôi đã tạo một tuyến đường khác cho mọi tệp trong một thư mục cụ thể. Do đó, đi đến đường dẫn đó có nghĩa là mở tệp đó.

function getroutes(list){
list.forEach(function(element) {
  app.get("/"+ element,  function(req, res) {
    res.sendFile(__dirname + "/public/extracted/" + element);
  });
});

Tôi đã gọi hàm này truyền danh sách tên tệp trong thư mục __dirname/public/extractedvà nó tạo ra một tuyến đường khác cho mỗi tên tệp mà tôi có thể hiển thị trên phía máy chủ.

Tôi sử dụng đoạn mã sau (mã rút gọn) trong Firefox 69.0 (trên Ubuntu) để đọc thư mục và hiển thị hình ảnh như một phần của khung ảnh kỹ thuật số. Trang này được tạo bằng HTML, CSS và JavaScript và nó nằm trên cùng một máy mà tôi chạy trình duyệt. Các hình ảnh cũng được đặt trên cùng một máy, do đó không có sự quan sát từ "bên ngoài".

var directory = <path>;
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', directory, false); // false for synchronous request
xmlHttp.send(null);
var ret = xmlHttp.responseText;
var fileList = ret.split('\n');
for (i = 0; i < fileList.length; i++) {
    var fileinfo = fileList[i].split(' ');
    if (fileinfo[0] == '201:') {
        document.write(fileinfo[1] + "<br>");
        document.write('<img src=\"' + directory + fileinfo[1] + '\"/>');
    }
}

Điều này yêu cầu chính sách security.fileuri.strict_origin_policybị vô hiệu hóa. Điều này có nghĩa là nó có thể không phải là giải pháp bạn muốn sử dụng. Trong trường hợp của tôi, tôi cho là ổn.

Tạo một tệp php có tên 'files.php' với nội dung sau:

<?php 
$out = array();
foreach (glob('/assets/photos/*') as $filename) {
    $p = pathinfo($filename);
    $out[] = $p['basename'];
}
echo json_encode($out); 
?>

sau đó gọi nó bằng jQuery:

$.getJSON('files.php').then(function (response) {
     console.log(response);
});