使用 jQuery 获取给定目录中的文件名答案

【问题标题】：get filenames in a given directory using jQuery使用 jQuery 获取给定目录中的文件名
【发布时间】：2018-07-16 02:58:45
【问题描述】：

（我发现了一些类似的问题，但没有一个能解决我的问题，所以我认为这不是重复的问题）

我想使用 jQuery 在我的一个文件夹中检索文件名。我尝试了以下方法，但仍然无法获取每个文件名。

$.get(".", function(data) {
    $("#divID").append(data);
});

但我注意到“数据”的类型是字符串，它的末尾包含文件名，如下所示：

<script>addRow("filename.csv","filename.csv",0,238618,"233 kB",1512119177,"12/1/17, 5:06:17 PM");</script>

那么无论如何我可以从“数据”中检索文件名吗？（不使用正则表达式）

【问题讨论】：

我相信您只是尝试从 data 参数中检索第一个 filename.csv，而不是实际尝试读取本地文件系统上的文件夹结构。 jQuery 将无法访问您的本地文件系统。请为您的问题添加更多详细信息。
@CharanrajGolla 我想先获取所有文件名，然后再读取这些文件。我知道如何获取文件的内容，但不知道每个文件名。
您无法在客户端机器上使用 JavaScript 从远程服务器或本地服务器读取文件。您可以使用服务器端代码获取文件详细信息并通过 ajax 将其发送给客户端，但它始终是包含列表详细信息的字符串。如果你想要文件的内容，那么你的 JS 将不得不向服务器发出请求以读取文件并提供它的输出，该输出将再次以字符串形式出现。
@CharanrajGolla 使用服务器端代码读取文件名的最佳做法是什么？
您可以编写一个服务器端代码，例如“Files/GetFile/”，它将获取所有文件的列表并将其作为 JSON 字符串传递。这可用于显示所有文件的列表。如果您需要显示文件的内容，则使用唯一文件标识符向服务器发出第二个 ajax 请求并读取内容并返回字符串。然后可以在客户端页面上的适当元素下显示此字符串

标签： javascript jquery ajax file

【解决方案1】：

您无法读取客户端计算机中的文件。您可以通过修改标志来访问它们以用于开发目的。在此查看my answer。在此之后继续下面的代码。

两者都有效。

使用 PURE JAVASCRIPT：

var filenames=[], foldernames=[];
var url = "file:///Users/Default/Downloads";
var req = new XMLHttpRequest();
req.open("GET",url,true);
req.onreadystatechange=function(){
    if(req.readyState === 4)
    {
        document.write(req.responseText);
        getNames();
    }
};
req.send();

function getNames()
{
    var files = document.querySelectorAll("a.icon.file");
    var folders = document.querySelectorAll("a.icon.dir");
    files.forEach(function(item){filenames.push(item.textContent)})
    folders.forEach(function(item){foldernames.push(item.textContent.slice(0,-1))})
    console.log(filenames);
    console.log(foldernames);
}

使用 JQUERY ：

var filenames=[], foldernames=[];

$.get("file:///Users/Default/Downloads",function(response){
    document.write(response);
    getNames();
});

function getNames()
{
    var files = document.querySelectorAll("a.icon.file");
    var folders = document.querySelectorAll("a.icon.dir");
    files.forEach(function(item){filenames.push(item.textContent)})
    folders.forEach(function(item){foldernames.push(item.textContent.slice(0,-1))})
    console.log(filenames);
    console.log(foldernames);
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：