HTML 中的文件 browser/editor (NAS)

Question

我正在微控制器上制作 NAS（网络附加存储）。 NAS 的用户界面将是托管在微控制器本身上的网页。该网页将允许用户浏览位于微控制器上的文件并对其进行编辑（稍后我将添加更多功能）。更准确地说，文件位于连接到微控制器的 SD 卡上。到目前为止，我已经编写了自己的 HTTP 服务器。我目前正在编写用户界面网页。这是我所做的：

访问根目录时： index.html in / directory

当我打开文件时： Fichier1.txt in / directory opened

当我打开目录时： index.html in /Dossier1/ directory

这里是根目录的index.html文件：

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<h2>/</h2>

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa fa-folder"></i></span><a href="Dossier1/index.html">Dossier1</a></li>
  <li><span class="fa-li"><i class="fa fa-file"></i></span><a href="Fichier1.txt" target="file_viewer">Fichier1.txt</a></li>
</ul>

<iframe name="file_viewer" style="height:100vh;width:100%;border:none;"></iframe>
</body>

</html>

如您所见，文件在 iframe 中打开，因此无法编辑。我想知道是否有一种方法可以在文本区域或其他允许用户编辑内容的地方加载文件。

谢谢！

Answer 1

我想出了办法。

这是根目录的新index.html文件：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<h2>/</h2>

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa fa-folder"></i></span><a href="Dossier1/index.html">Dossier1</a></li>
  <li><span class="fa-li"><i class="fa fa-file"></i></span><a href="javascript:load_file('Fichier1.txt');">Fichier1.txt</a></li>
</ul>

<textarea id="file_editor" style="height:100vh;width:100%;"></textarea>

<script>
function load_file(file) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("file_editor").value = this.responseText;
    }
  };
  xhttp.open("GET", file, true);
  xhttp.send();
}
</script>
</body>
</html>

HTML 中的文件 browser/editor (NAS)

File browser/editor in HTML (NAS)

html

browser

editor

microcontroller

nas