如何从(独立的).html文件中列出FTP上的文件

Question

我正在开发一个独立的HTML表单。在表格的一部分中，我希望可以选择FTP上的文件名。

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

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

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

我使用德国气候数据中心的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>