Файловый браузер / редактор в HTML (NAS) - PullRequest
Новая
       22

Файловый браузер / редактор в HTML (NAS)

0 голосов
/ 10 ноября 2019

Я делаю NAS (Network Attached Storage) на микроконтроллере. Пользовательским интерфейсом для NAS будет веб-страница, размещенная на самом микроконтроллере. Эта веб-страница позволит пользователю просматривать файлы, расположенные на микроконтроллере, и редактировать их (я добавлю больше функций позже). Точнее, файлы находятся на SD-карте, подключенной к микроконтроллеру. До сих пор я написал свой собственный HTTP-сервер. В настоящее время я пишу веб-страницу интерфейса пользователя. Вот что я сделал:

Когда я получаю доступ к корневому каталогу: index.html в / directory

Когда я открываю файл: Fichier1.txtв / каталог открыт

Когда я открываю каталог: index.html в / 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>

Как видите, файлы открываются в фрейме, поэтому их нельзя редактировать. Мне было интересно, есть ли способ загрузки файлов в текстовой области или что-то еще, что позволит пользователю редактировать содержимое.

Спасибо!

1 Ответ

0 голосов
/ 11 ноября 2019

Я нашел способ сделать это.

Вот новый файл 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>
...