使用.get()检索服务器上文件夹中所有文件名的数组
使用.get()检索服务器上文件夹中所有文件名的数组
提问于 2018-12-21 16:34:55
我能够用以下代码显示服务器上文件夹中所有文件的列表：
$(document).ready(function() {
$.get("/mockups/bryan/file_list/", function(allFiles) {
$("#fileNames").append(allFiles);
console.log(allFiles);
});
})但是，它检索的数据是我的服务器生成的一个完全格式化的网页，如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Index of /mockups/bryan/file_list</title>
</head>
<body>
<h1>Index of /mockups/bryan/file_list</h1>
<pre><img src="/icons/blank.gif" alt="Icon "> <a href="?C=N;O=D">Name</a> <a href="?C=M;O=A">Last modified</a> <a href="?C=S;O=A">Size</a> <a href="?C=D;O=A">Description</a><hr><img src="/icons/back.gif" alt="[PARENTDIR]"> <a href="/mockups/bryan/">Parent Directory</a> -
<img src="/icons/image2.gif" alt="[IMG]"> <a href="092018-powersale_CTA.jpg">092018-powersale_CTA..></a> 2018-09-19 09:57 7.2K
<img src="/icons/image2.gif" alt="[IMG]"> <a href="092018-powersale_cat1.jpg">092018-powersale_cat..></a> 2018-09-19 09:26 41K
...我只想要一个数组，其中包含文件夹中所有文件的名称，这样我就可以创建自己的页面来显示和链接到它们。
有更好的方法吗？也许.get()是使用错误的工具，或者我使用它是错误的。(或者两者都是)我正要用一些RegEx的东西来提取我想要的信息，但后来想：“一定有更好的方法！”
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-21 23:25:10
是的，有一个比RegExp更好的方法。从响应文本中创建一个documentFragment，并从中提取链接。就像这样：
$.get("/mockups/bryan/file_list/", function (allFiles) {
let fragment = document.createDocumentFragment();
let wrapper = document.createElement('div');
let fileNames = [];
// Put allFiles to the newly-created div
wrapper.innerHTML = allFiles;
// Append the elements from the div to the documentFragment
Array.from(wrapper.childNodes).forEach(node =>
fragment.appendChild(node);
});
// Collect links, and extract hrefs to fileNames array
let links = fragment.querySelectorAll('a');
let len = links.length;
for (let n = 5; n < len; n++) { // Starting from 5 excludes the list headers
fileNames.push(links[n].getAttribute('href'));
}
// Append filenames list to the page
$("#fileNames").append(fileNames.join('<br>'));
});警告！只用于本地网络。此代码不建议在公共web服务器上读取文件夹内容，请使用服务器端代码向客户端发送文件名。
将DTD和html、head和body标记添加到div中有点麻烦，但是设置innerHTML会删除这些标记，并且只添加相关的内容。
我已经从href属性中提取了文件名，但是如果链接文本很好，您可以使用textContent属性而不是getAttribute方法。读取链接的href属性通常会向值添加完整的路径。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53888112
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号