web-dev-qa-db-ja.com

Webページ内のディレクトリのファイルの一覧表示

ファイルを表示するためのリンクを使用して、Webページ内のディレクトリのファイルを一覧表示する方法はありますか。

いくつかのPDFファイルを静的Webサイトの特定のディレクトリ（html + js）にアップロードし、pdfファイルを表示するためのリンクを含むページにファイルのリストを表示したい新しいファイルをアップロードする場合、毎回htmlページを変更する必要がないように、それを行う方法はありますか？

javascripthtmlfile-upload
10
Bhaskar Malakar

ApacheをWebサーバーとして使用しており、pdfファイルをアップロードするディレクトリに mod-autoindex を設定している場合、そのURLへのナビゲーション時に次のように考えられるはずです。

enter image description here

この自動生成されたページは、jqueryを使用してjsによって簡単に解析できます。

var pdfFilesDirectory = '/uploads/pdf/';

// get auto-generated page 
$.ajax({url: pdfFilesDirectory}).then(function(html) {
    // create temporary DOM element
    var document = $(html);

    // find all links ending with .pdf 
    document.find('a[href$=.pdf]').each(function() {
        var pdfName = $(this).text();
        var pdfUrl = $(this).attr('href');

        // do what you want here 
    })
});
4
Olim Saidov

すべてのファイルとフォルダーを取得するタスクを自動化するノードモジュールを作成しました： mddir

使用法

node mddir "../relative/path/"

インストールするには：npm install mddir -g

現在のディレクトリのマークダウンを生成するには：mddir

絶対パスを生成するには：mddir/absolute/path

相対パス用に生成するには：mddir〜/ Documents/whatever。

Mdファイルが作業ディレクトリに生成されます。

現在、node_modulesおよび.gitフォルダーは無視されます。

トラブルシューティング

「node\r：No such file or directory」というエラーを受け取った場合、問題はオペレーティングシステムが異なる行末を使用しており、行末のスタイルを明示的にUnixに設定しないとmddirがそれらを解析できないことです。これは通常Windowsに影響しますが、Linuxの一部のバージョンにも影響します。行末をUnixスタイルに設定するには、mddir npmグローバルbinフォルダー内で実行する必要があります。

行末の修正

以下を使用してnpm binフォルダーパスを取得します。

npm config get prefix

そのフォルダーにCd

dos2unixをインストールする

dos2unix lib/node_modules/mddir/src/mddir.js

これは、行末をDosではなくUnixに変換します

次に、node mddir "../relative/path/"を使用して通常どおり実行します。

別のノードモジュールagdを呼び出して、他のモジュールに基づいてツリービューを生成しました： https://github.com/JohnByrneRepo/agd 。

自動生成ドキュメント（Alpha）

これまでの機能：

ノードにツリーフォルダー構造を生成します。これは、ブラウザーでツリーグリッドとしてレンダリングされます。ファイル（非ルートレベル）をクリックして、メインビューに入力します。

近日公開：

関数名とパラメーター、関数の依存関係などを含むドキュメントガイドを生成します。最初はjQueryおよびプレーンJavaScript関数のネームスペースと互換性があり、すぐにReact、Redux、Angular 1、Angular 2および他のフレームワークと互換性があります。

使用法

ノードagd relativePath

例えばノードagd '../../'

生成されたcode.json。

「node http-server」を実行してからブラウザーを開き、サイドバーにレンダリングされたファイル構造を表示します。大規模なプロジェクトでは、レンダリングに1〜2分かかります。

生成されたデータの例については、code.jsonを参照してください。

To-do：トップレベルファイルのコードコンテンツを追加します。ツリーhtml生成をノードに移動します。

[email protected]にお問い合わせください

MITライセンス

生成されたツリー構造の例

enter image description here

2
John Byrne

シンプルに。すべてのファイルをディレクトリに配置し、そのディレクトリのホームページを作成しないでください。次に、目的のページで、そのディレクトリを示すiframeを追加します。次に、アップロードしたファイルのリストがすべてハイパーリンクで表示されます。リンクをクリックすると、IframeにPDFファイルが表示されます。

1
Zoxman

サーバー側の実装が必要です。たとえば、PHPを使用してこれを行うことができます。JavaScriptでこれを行うことはできません。クライアント側で実行され、サーバー上のファイル。

1
meskobalazs

JavaScriptとPHPの組み合わせが必要です。 PHP呼び出しを使用して、Javascriptを介してAJAXファイルを呼び出すことができます。 Jsonオブジェクトを返すこのPHPファイルを試してください。

$directory = "/directory/path";
$pdffiles = glob($directory . "*.pdf");

$files = array();

foreach($pdffiles as $pdffile)
{
   $files[] = "<a href=$pdffile>".basename($pdffile)."</a>";
}

echo json_encode($files);

ここで、JsonオブジェクトをループしてUrlをリストする必要があります。

何かのようなもの：

$.getJSON( "file.php", function( data ) {
  var items = [];
  $.each( data, function(val ) {
    items.Push(val);
  });

  $( "body" ).append( items );
});

テストしませんでしたが、このようなものは動作するはずです。

1
Erik van de Ven

クライアント側でのみ実行されるJavaScriptの代わりに、PHPまたは他のサーバー言語を使用してファイルのディレクトリをクロールし、HTMLファイル/テンプレート内にリストすることを検討する必要があります。PHPにはscandir関数があります。これは、ディレクトリ内のファイルを一覧表示できます

0
Kristian Ivanov
  1. ブラウザを開く
  2. リストしたいフォルダーに移動します
  3. ファイルのリストが表示されたら、続行します
  4. そのフォルダーにajax呼び出しを行います（以下の例）
  5. responseはリストページのhtmlになります
  6. それを解析してファイル一覧を取得できます

例：

// This is in angular, but you can use whatever
$http.get('folder_to_list/').success(function(response) {
    console.log(response);
});
0
Travis Heeter