Question

我的网站正在提供/assets/photos/文件夹中的大量图片。如何使用Javascript获取该文件夹中的文件列表？

Answer 1

当前代码将提供文件夹中所有文件的列表，假设它位于服务器端，您要列出所有文件：

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

Answer 2

不，Javascript无权访问文件系统。 Server side Javascript是一个完全不同的故事，但我猜你并不是那个意思。

Answer 3

对于客户端文件，您无法获取用户本地目录中的文件列表。

如果用户提供了上传的文件，您可以通过他们的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>

Answer 4

我写了一个文件 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 [] array

Answer 5

要获取指定文件夹中的文件名列表，可以使用

function myFilter ($data) {

    $checkFylker          = $data['checkFylker'];
    $checkUtstyr          = $data['checkUtstyr'];
    $checkFors            = $data['checkFors'];
    $checkType            = $data['checkType'];


    //return $results;


  //Main $args
  $args = array(
      'post_type'     => 'ml_opp', // Query only "ml_opp" custom posts
      'post_status'   => 'publish', // Query only posts with "publish" status
      'orderby'       => 'date', // Sort posts by date
      'order'         => 'ASC' // ASC
    );



    $args['tax_query'] = array( 'relation'=>'AND' ); // AND means that all conditions of meta_query should be true

    // for taxonomies / utstyr
    if( isset( $checkUtstyr ) )
      $args['tax_query'][] = array(
        array(
          'taxonomy'  => 'ml_utstyr',
          'field'     => 'id',
          'terms'     => $checkUtstyr
        )
      );

    //for taxonomies / forsendelse
    if( isset( $checkFors ) )
      $args['tax_query'][] = array(
        array(
          'taxonomy'  => 'ml_forsendelse',
          'field'     => 'id',
          'terms'     => $checkFors
        )
      );

    // for taxonomies / fylker
    if( isset( $checkFylker ) )
      $args['tax_query'] = array(
        array(
          'taxonomy'  => 'ml_fylk',
          'field'     => 'id',
          'terms'     => $checkFylker
        )
      );

    // for taxonomies / type
    if( isset( $checkType ) )
      $args['tax_query'] = array(
        array(
          'taxonomy'  => 'ml_typ',
          'field'     => 'id',
          'terms'     => $checkType
        )
      );

    $query = new WP_Query( $args );

    if( $query->have_posts() ) :
      while( $query->have_posts() ): $query->the_post();
        echo '<h2>' . $query->post->post_title . '</h2>';
      endwhile;
      wp_reset_postdata();
    else :
      echo 'No posts found';
    endif;

    die();
    }

这将返回一个列表，您可以通过简单的列表索引来解析该列表，例如文件[0]，文件[1] 等。希望这会有所帮助。

Answer 6

我在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。这意味着它可能不是您要使用的解决方案。就我而言，我认为还可以。

Answer 7

我为特定目录中的每个文件设置了不同的路由。因此，转到该路径意味着打开该文件。

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

我调用此函数来传递目录__dirname/public/extracted中的文件名列表，它为我能够在服务器端呈现的每个文件名创建了一条不同的路由。

Answer 8

将 JSONP 应用于 IfTheElse 答案：

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

Answer 9

如果你使用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>

使用Javascript获取文件夹中的文件名列表

9 个答案: