9

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

したがって、この回答を参照して、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/ を読み込めません。無効な応答を受け取りました。したがって、オリジン 'null' へのアクセスは許可されません。

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

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

どうぞよろしくお願いいたします。

4

2 に答える 2

8 
<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 ページのフォルダー内のすべてのファイルが印刷されます。

于 2016-02-18T06:26:19.050 に答える
3

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>
于 2015-03-30T07:50:36.503 に答える