Javascript로 폴더의 파일 이름 목록 가져 오기

내 웹 사이트는 /assets/photos/폴더 에서 많은 사진을 제공하고 있습니다 . Javascript로 해당 폴더의 파일 목록을 어떻게 얻을 수 있습니까?

현재 코드는 모든 파일을 나열하려는 서버 측에 있다고 가정하여 폴더의 모든 파일 목록을 제공합니다.

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

아니요, Javascript는 파일 시스템에 액세스 할 수 없습니다. 서버 측 자바 스크립트 는 완전히 다른 이야기이지만 당신이 그것을 의미하지는 않습니다.

dir.php 파일을 작성합니다.

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

스크립트에 다음을 추가하십시오.

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

그리고 files [] 배열 사용

클라이언트 측 파일의 경우 사용자의 로컬 디렉토리에있는 파일 목록을 가져올 수 없습니다.

사용자가 업로드 된 파일을 제공 한 경우 해당 input요소 를 통해 액세스 할 수 있습니다 .

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

지정된 폴더의 파일 이름 목록을 얻으려면 다음을 사용할 수 있습니다.

fs.readdir(directory_path, callback_function)

이렇게하면 file[0],file[1], 등과 같은 간단한 목록 인덱싱으로 구문 분석 할 수있는 목록이 반환됩니다 .

특정 디렉토리의 모든 파일에 대해 다른 경로를 만들었습니다. 따라서 해당 경로로 이동하는 것은 해당 파일을 여는 것을 의미합니다.

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

이 함수를 호출하여 디렉토리의 파일 이름 목록을 전달하고 __dirname/public/extracted서버 측에서 렌더링 할 수있는 각 파일 이름에 대해 다른 경로를 생성했습니다.

Firefox 69.0 (Ubuntu에서)에서 다음 (줄여 진 코드)을 사용하여 디렉토리를 읽고 이미지를 디지털 사진 프레임의 일부로 표시합니다. 이 페이지는 HTML, CSS 및 JavaScript로 만들어졌으며 브라우저를 실행하는 동일한 컴퓨터에 있습니다. 이미지도 같은 컴퓨터에 있으므로 "외부"에서 볼 수 없습니다.

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] + '\"/>');
    }
}

이를 위해서는 정책 security.fileuri.strict_origin_policy을 비활성화 해야합니다 . 이는 사용하려는 솔루션이 아닐 수도 있음을 의미합니다. 제 경우에는 괜찮다고 생각했습니다.

다음 내용으로 'files.php'라는 PHP 파일을 만듭니다.

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

그런 다음 jQuery로 호출하십시오.

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