Javascript

Question

我有一个要求，需要从客户端的文件夹中检索所有文件名。

因此我尝试使用 Jquery 引用 this answer.

来检索文件夹中文件的名称

我的代码如下：

    <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 cannot load file:///E:/Test/xml/. Received an invalid response. Origin 'null' is therefore not allowed access.

Firefox: ReferenceError: $ is not defined

我尝试了很多谷歌搜索，但错误没有解决。

非常感谢您的帮助。

Answer 1

您似乎正在通过双击 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>

Answer 2

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

这将打印网页上文件夹中的所有文件。

Javascript - 检索文件夹中文件的名称

Javascript - Retrieve names of files in a folder

jquery

jquery-ajaxq

加上

更新