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

时间:2015-03-30 07:34:33

标签: javascript jquery jquery-ajaxq

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

因此,我试图使用引用this answer的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:$未定义

我尝试过google很多但是错误没有解决。

非常感谢您的帮助。

2 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分: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>