如何从（独立）.html 文件列出 FTP 上的文件？

Question

我正在开发一个自包含（独立）的 HTML 表单。 在表单的一部分中，我希望能够选择 FTP 上的文件的名称。

因此，在我的 .html 文件中，我试图找到一种方法来列出 FTP 上所有文件的名称。

根据我目前所读到的内容，似乎没有传统的方法可以做到这一点，因为访问 FTP 应该使用诸如 PHP 之类的服务器端语言来完成，如 here 或 here 所解释的。

所以我想看看我是否可以用不同的方式做到这一点。 我的一个想法是将 FTP 页面上显示的内容复制到 JavaScript 变量中，如 here 所示。

我使用德国气候数据中心的 FTP 作为示例，因为它是一个开放访问的 FTP，不需要任何登录信息。 在下面的代码中，我试图将显示在该 FTP 页面上的内容放入我的 .html 文件中的 <div> 中，然后使用 console.log 显示 <div>。 但是，如下图，我到现在还没有成功：

function start_FTP() {
  var server = "ftp-cdc.dwd.de/test/weather/radar/sites/sweep_vol_z/mem/hdf5/filter_polarimetric/";
  var ftpsite = "ftp://" + server;
  window.open(ftpsite);

  document.getElementById("FTP_content").innerHTML = '<object type="text/html" data=ftpsite ></object>';
  console.log(FTP_content);
}

<h2> List FTP content using JavaScript </h2>
<button type="button" id="FTP_button" name="FTP_button" onclick="start_FTP()">Select File Name</button>
<div id="FTP_content"> </div>

<div> 不包含任何有用的信息。

这只是朝着我的最终目标迈出的一步，实际上是创建一个新窗口，列出 FTP 页面上的内容，每行旁边都有一个复选框，这样用户就可以选择他想要的文件名需要。

这可以使用 JavaScript 吗？ 如果没有，是否有任何其他“技巧”可用于仅使用 JavaScript 实现此目标？

编辑

我遇到的问题是我无法在服务器端做任何事情（很遗憾）。

我需要开发一个独立的 HTML 表单，该表单需要发送给许多不同的最终用户，他们需要能够“按原样”使用此表单。 这些最终用户（客户端）需要能够从可在开放访问 FTP 上看到的文件列表中选择文件名。

所以我试图复制在开放访问 FTP 页面上可见的文件名，并在每个文件名前添加一个复选框，以便最终用户可以选择对应于文件的名称（将用于进一步的数据处理）。

Answer 1

你的意思是这样的吗？ 它需要 Jquery。

Javascript，css，然后是 HTML。

function handleFileSelect (e) {
    var files = e.target.files;
    if (files.length < 1) {
        alert('select a file...');
        return;
    }
    var file = files[0];
    var reader = new FileReader();
    reader.onload = onFileLoaded;
    reader.readAsDataURL(file);
}

function onFileLoaded (e) {
    var match = /^data:(.*);base64,(.*)$/.exec(e.target.result);
    if (match == null) {
        throw 'Could not parse result'; // should not happen
    }
    var mimeType = match[1];
    var content = match[2];
    alert(mimeType);
    alert(content);
}

$(function () {
    $('#import-pfx-button').click(function(e) {
        $('#file-input').click();
    });
    $('#file-input').change(handleFileSelect);
});

#file-input {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="import-pfx-button">Browse...</button>
<input type="file" id="file-input" />
<output id="list"></output>