HTML (NAS) 中的文件浏览器/编辑器答案

【问题标题】：File browser/editor in HTML (NAS)HTML (NAS) 中的文件浏览器/编辑器
【发布时间】：2020-03-06 05:40:07
【问题描述】：

我正在微控制器上制作 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 中打开的，因此无法编辑。我想知道是否有办法将文件加载到 textarea 或其他允许用户编辑内容的地方。

谢谢！

【问题讨论】：

标签： html browser editor microcontroller nas

【解决方案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>

【讨论】：