자바스크립트가 있는 폴더의 파일 이름 목록 가져오기

자바스크립트가 있는 폴더의 파일 이름 목록 가져오기

의 웹사이트는 의 ./assets/photos/폴더. 을 어떻게 수 ?자바스크립트로 해당 폴더의 파일 목록을 어떻게 얻을 수 있습니까?

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

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

아니요, 자바스크립트는 파일 시스템에 접근할 수 없습니다.서버 쪽 자바스크립트는 전혀 다른 이야기지만, 그런 뜻은 아닌 것 같습니다.

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

파일[] 배열을 사용합니다.

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

fs.readdir(directory_path, callback_function)

하면 됩니다와 목록 분석할 수 됩니다.file[0],file[1].

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

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

특정 디렉토리에 있는 파일마다 다른 경로를 만들었습니다.따라서 그 길로 간다는 것은 그 파일을 열었다는 것을 의미합니다.

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

했습니다 의 파일 하여 이 했습니다.__dirname/public/extracted그리고 각각의 파일명에 대해 다른 경로를 만들어 서버측에서 렌더링할 수 있었습니다.

(Ubuntu에서) Firefox 69.0의 다음(스트립다운 코드)을 사용하여 디렉토리를 읽고 이미지를 디지털 사진 프레임의 일부로 표시합니다.페이지는 HTML, CSS, 자바스크립트로 만들어지며, 브라우저를 실행하는 기계와 같은 곳에 있습니다.이미지가 동일한 기계에 위치하기 때문에 "외부"에서 볼 수 없습니다.

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장애인이 될 겁니다 이는하고자 하는 수도 합니다.즉, 사용하고자 하는 솔루션이 아닐 수도 있습니다.제 경우에는 괜찮다고 생각했습니다.

하면 nginx 를를 할 수 autoindex on을 요청하면.,url 에서 수 .

<script>
  function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
      }
    };
    xhttp.open("GET", "/assets/photos/", true);
    xhttp.send();
  }

  function myFunction(xml) {
    // console.log(xml.responseText)
    var parser = new DOMParser();
    var htmlDoc = parser.parseFromString(xml.responseText, 'text/html');
    var preList = htmlDoc.getElementsByTagName("pre")[0].getElementsByTagName("a")
    for (i = 1; i < preList.length; i++) {
      console.log(preList[i].innerHTML)
    }
  }
</script>

그런 다음 특정 파일을 확인하려면 다음 작업을 수행할 수 있습니다.parsedDirectory.includes("filename")부울 값을 반환합니다.

다른 사람들의 답변에 따르면 클라이언트 쪽에서는 불가능할 것 같아 서버 쪽에서 다음과 같이 해결했습니다.고객측 js측

get_file(conf.data_address).then(imgs => { // get_file is wrapper of fetch API
    let img = new Image();
    img.src = `./files/Blackpink/${imgs[0]}`; // e.g. load the first img 
    img.height = 40;
    return new Promise(resolve => {
      img.onload = () => {
        resolve(img);
      }
    })
  })

서버 사이드 바이 장고:

def get(self, request): # get method
        address = request.query_params.get('address') # get the requested folder
        is_database = request.query_params.get('is_database')
        if address.endswith('/'):
            j = u.get_path_files(address,is_full=False) # wrapper of os.listdir of python to get the files in the requested directory.

OP가 Node처럼 들리게 하는 반면에.JS/Server Side, 나중에 언급한 내용에 따르면 그는 클라이언트 측을 찾고 있다고 합니다.그럼에도 불구하고 서버측은 이미 다른 답변에서 다루고 있습니다.

많은 사람들이 클라이언트 측에서는 불가능하다고 말하지만, 사실 아래에 설명된 것처럼 2배의 방법이 있습니다.

참고: 클라이언트 측에서는 항상 사용자 입력이 필요합니다. 즉, 파일 열기 대화상자를 선택하고 사용자가 폴더를 선택한 다음 브라우저에서 "Are You Sure Y/N" 메시지를 표시합니다.

HTTPS가 필요 없고 IE에서도 작동하기 때문에 이 방법으로 진행했습니다.참고: IE에서 "작동"하지만 IE에서 단일 파일만 선택할 수 있으며 폴더를 선택하려면 Edge/Chrome이 필요합니다.

HTML:

입력 유형 스타일 지정="file" 버튼

<label for="file-upload" class="ms-Button ms-Button--primary">
    <span class="ms-Button-label">LIST FILES IN DIR</span>
    <span class="ms-Button-description">List Files In Directory</span>
</label>
<input id="file-upload" type="file" webkitdirectory="" directory="" hidden />

JS:

let i = document.querySelector('input').addEventListener('change', (e) => {
    var Arr_Of_Objs = []
    for (let i = 0; i < e.target.files.length; i++) {
        var file_name = e.target.files[i].name
        var obj = {}
        obj["Files"] = file_name
        Arr_Of_Objs.push(obj);
        console.log(e.target.files[i].name);
    }
    Button_LIST_FILES_OnClick(Arr_Of_Objs)
})

https://stackoverflow.com/a/49657412/5079799

보다 현대적인 접근 방식은showDirectoryPicker그러나 브라우저 호환성이 제한되어 있고 HTTPS가 필요합니다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker#browser_compatibility

미발견(약속)오류: 창을 입력합니다.showOpenFilePicker가 함수가 아님

https://stackoverflow.com/a/72687727/5079799

JS:

const button = document.getElementById('button');
button.addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    console.log(entry.kind, entry.name);
  }
});

IfTheElse 답변에 JSONP 적용:

/dir.php에 다음을 적습니다.

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

index.html에 다음 스크립트를 추가합니다.

<script>
    /* this function will be fired when there are files
       in dir search in php' glob
     */
    function callback(files) {
        alert(files);
     }

    /* call inside document.ready to make sure the
       callback is already loaded
     */
    $(document).ready(function() {
        let php = document.createElement("script");
        php.setAttribute("src", "/dir.php");
        document.body.appendChild(php);
    });
</script>

문제가 오래된 것은 이해하지만 여전히 많은 문제로 돌아옵니다.클라이언트 측에서는 순수 자바스크립트를 사용하여 로컬 디렉토리에 파일을 나열할 수 없는 것이 사실입니다.아래는 PHP를 사용하고 확장자가 있는 파일 목록을 자바스크립트로 전송하는 전체 스니펫입니다.

<?PHP
  $out = array(); 
  $out = scandir("MT940");      // Or any path to local dir to be listed
  $out = array_diff($out, array('.', '..'));    // Skip current and parent dir 
?>

<!DOCTYPE html>
<html lang="pl-PL">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>  
  <title></title>
</head>
<body>
  <div class="service-container"        
    data-files= '<?php echo (json_encode($out)); ?>'>   
  </div>
  <script>
    let files;     
    $(document).ready(function() {
      $('.service-container').each(function() {
        let container = $(this);
          files = container.data('files');
          fileNames = Object.values(files);
      });
    });
  </script> 
  
  <!-- Some HTML code here -->
  
  <script>
    let fileNames = [];
    $(document).ready(function() {
      console.log(fileNames);
      // Do something with fileNames
    });
  </script>
</body>
</html>

언급URL : https://stackoverflow.com/questions/31274329/get-list-of-filenames-in-folder-with-javascript