Как загрузить текстовый файл в textarea

Современные версии Javascript уже давно поддерживают объект FileReader (поддержка браузерами тоже приведена по ссылке), с помощью которого можно асинхронно прочитать содержимое файла, выбранного пользователем в элементе HTML-формы <input type="file">.

Таким образом, мы можем обрабатывать, по крайней мере, текстовые форматы файлов на стороне клиента, минуя сервер. Логично будет загружать файлы в многострочное текстовое поле <textarea>.

Приведём простой пример такой "читалки". Во-первых, нам понадобится форма HTML, в которой мы разрешим выбирать интересующие нас типы файлов (в примере - .txt, .css, .html):

<form method="post">
 <textarea cols="100" rows="20" id="file-textarea"></textarea>
 <br>
 <input type="file" id="file-input" accept=".txt,.css,.html">
</form>

Во-вторых, для загрузки файла в форму можно применять библиотеку JQuery, подключив её локально или с сайта разработчика:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#file-input").change(function() {
 let reader = new FileReader();
 reader.onload = function(e){
  $("#file-textarea").val(e.target.result);
 };
 reader.readAsText($("#file-input")[0].files[0], "UTF-8");
});
</script>

Не сложнее будет и написать скрипт, работающий без внешних библиотек (код формы остаётся тем же):

<script>
 document.getElementById('file-input').addEventListener ('change', function(e) { 
  let reader = new FileReader();
  reader.onload = function(e){
   document.getElementById('file-textarea').value = e.target.result;
  };
  reader.readAsText(document.getElementById('file-input').files[0], "UTF-8");
 });
</script>

В обоих случаях предполагается использование стандартной кодировки Юникода UTF-8.

Вот что вышло, попробуйте загрузить сюда файл:

02.10.2022, 13:35 [899 просмотров]