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/。收到无效回复。因此,Origin '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>

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

于 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 回答