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

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

Чтобы загрузить содержимое файла в <textarea>, понадобится форма:

<form method="post">
	<textarea id="js-textarea"></textarea>
	<input type="file" id="js-file" accept=".txt,.css,.html">
</form>
HTML

И JQuery обработчик нажатия на кнопку выбора файла:

$("#js-file").change(function(){
	var reader = new FileReader();
	reader.onload = function(e){
		$("#js-textarea").val(e.target.result);
	};
	reader.readAsText($("#js-file")[0].files[0], "UTF-8");
});
JS

Результат:

Поддержка FileReader в браузерах

Data on support for the filereader feature across the major browsers from caniuse.com

16.10.2020, обновлено 14.05.2021
1993
Предыдущая запись Select c поиском

Комментарии

, чтобы добавить комментарий.

Другие публикации

Автовысота textarea
Автоизменение высоты textarea можно сделать следующим способом...
4644
0
Получить выделенный текст из текстового поля
У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают...
3250
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
18073
+19
Изменение размеров textarea и других элементов
В CSS 3 появилось свойство resize, которе указывает, можно ли пользователю изменять размеры текстового поля и других...
6340
0
Обернуть выделенный текст тегами в textarea
С помощью JS-свойств selectionStart и selectionEnd можно сделать оборачивание выделенного текста тегами или BB-кодами.
3002
+3
Загрузка файлов через jQuery AJAX
В преведущей статье был приведен пример отправки файлов через AJAX с помощью плагина «jQuery Form Plugin». Но файлы...
14138
+4