【问题标题】：Javascript - Retrieve names of files in a folderJavascript - 检索文件夹中文件的名称
【发布时间】：2015-06-03 03:23:14
【问题描述】：

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

因此，我尝试使用引用 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/。收到一个无效响应。因此不允许访问 Origin 'null'。

Firefox: ReferenceError: $ 未定义

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

我们将非常感谢您的帮助。

【问题讨论】：

关于这一点 Firefox: ReferenceError: $ is not defined - 你确定 jQuery 已经加载了吗？
我正在使用
另外，您不能向本地文件位置发出 AJAX 请求。您需要向在您的机器上或远程运行的 Web 服务器发出请求。
@Rory McCrossan：好点。然后访问本地文件位置是否有任何方法可以使用 javascript/任何客户端程序。
看看这个：stackoverflow.com/questions/371875/… or stackoverflow.com/questions/18251432/… or html5rocks.com/en/tutorials/file/dndfiles

标签： javascript jquery jquery-ajaxq

【解决方案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>

【讨论】：

【解决方案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>

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

【讨论】：

很简单，但如何设置它以查看此路径：“/content/images/”？
你可以使用 $.get("/content/images/", function(data) {});这样做
知道了！谢谢。
这将在客户端尝试搜索文件时返回 403 错误。
这似乎是一种简单而准确的方法，但我找不到如何获取可以存储在数组中的正确文件名，例如，因为数据是一个完整的 html 文档......可以请您进一步解释一下？