时间戳

首页 > 解决方案 > 使用 .get() 检索服务器上文件夹中所有文件名的数组

javascript - 使用 .get() 检索服务器上文件夹中所有文件名的数组

问题描述

我可以使用以下代码显示服务器上文件夹中所有文件的列表：

$(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..&gt;</a> 2018-09-19 09:57  7.2K  
<img src="/icons/image2.gif" alt="[IMG]"> <a href="092018-powersale_cat1.jpg">092018-powersale_cat..&gt;</a> 2018-09-19 09:26   41K 
...

我只想要一个包含该文件夹中所有文件名称的数组，这样我就可以创建自己的页面来显示和链接到它们。

有一个更好的方法吗？也许 .get() 是错误的工具，或者我用错了。（或两者兼而有之。）我正要挖掘一些 RegEx 的东西来提取我想要的信息，但后来想“必须有更好的方法！”

标签： javascriptjquery

解决方案

是的，有比 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 有点 hackish，但是设置 innerHTML 会删除这些标签，并且只添加相关内容。

我已经从 href 属性中提取了文件名，但是如果链接文本不错，您可以使用textContent属性而不是getAttribute方法。链接的读取href属性通常会添加值的完整路径。

推荐阅读