web-dev-qa-db-ja.com

JavaScript-フォルダー内のファイルの名前を取得する

クライアント側のフォルダーからすべてのファイル名を取得する必要があるという要件があります。

したがって、私は この答え を参照するJqueryを使用して、フォルダー内のファイルの名前を取得しようとしています。

私のコードは次のとおりです：

    <script>
        var fileExt = ".xml";

        $(document).ready(
        function(){
            $.ajax({
            //This will retrieve the contents of the folder if the folder is configured as 'browsable'
            url: 'xml/',
            success: function (data) {
               $("#fileNames").html('<ul>');
               //List all xml file names in the page
               $(data).find('a:contains(" + fileExt + ")').each(function () {
                   var filename = this.href.replace(window.location, "").replace("http:///", "");
                   $("#fileNames").append( '<li>'+filename+'</li>');
               });
               $("#fileNames").append('</ul>');
             }     
            });
        });

    </script>

HTMLコードは次のとおりです。

<div id="fileNames"></div>

しかし、chromeおよびfirefoxでコードを実行すると、次のエラーが発生します。

chrome：XMLHttpRequestがfile：/// E：/ Test/xml /を読み込めません。無効な応答を受け取りました。したがって、Origin 'null'はアクセスを許可されません。

Firefox：ReferenceError：$が定義されていません

私はたくさんグーグルを試みました、しかしエラーは解決されません。

あなたの助けをいただければ幸いです。

javascriptjqueryjquery-ajaxq
9
iQuestProgrammer
<html>
<body>
    <div id='fileNames'></div>
</body>
<script src="js/jquery.js"></script>

<script type="text/javascript">
    $(document).ready(function () 
    {
        $.get(".", function(data) 
        {
            $("#fileNames").append(data);
        });
    })
</script>

これにより、Webページ上のフォルダー内のすべてのファイルが印刷されます。

7
Bhushan Pawar

Htmlファイルをダブルクリックして実行しているようです。そのため、fileプロトコルを使用してブラウザーで実行されます。 http://localhost/myhtml.htmlのようにサーバーから実行する必要があります。

私は自分のシステムでコードを試しましたが、サーバーで動作しています。

プラス

下の行に構文エラーがあります

$(data).find('a:contains(" + fileExt + ")').each(function () {

上記に置き換え

$(data).find("a:contains(" + fileExt + ")").each(function () {

私はubuntuシステムを使用しており、chromeブラウザを使用すると、場所への相対パスを返すため、場所を置き換える必要はありません。

更新

最終的なコードは次のようになります

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
   var fileExt = ".xml";

        $(document).ready(function(){

            $.ajax({
                //This will retrieve the contents of the folder if the folder is configured as 'browsable'
                url: 'xml/',
                success: function (data) {
                    console.log(data);
                   $("#fileNames").html('<ul>');
                   //List all xml file names in the page

                    //var filename = this.href.replace(window.location, "").replace("http:///", "");
                   //$("#fileNames").append( '<li>'+filename+'</li>');

                    $(data).find("a:contains(" + fileExt + ")").each(function () {
                        $("#fileNames").append( '<li>'+$(this).text()+'</li>');
                    });
                    $("#fileNames").append('</ul>');
                }
            });

        });
});
//]]>
</script>
3
shyammakwana.me