Как загрузить содержимое файла в 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
Предыдущая запись Select c поиском

Комментарии

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

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

Автоизменение высоты textarea можно сделать следующим способом...
1905
+1
У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают...
1325
0
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
7722
+10
В CSS 3 появилось свойство resize, которе указывает, можно ли пользователю изменять размеры текстового поля и других...
1908
+1
С помощью JS-свойств selectionStart и selectionEnd можно сделать оборачивание выделенного текста тегами или BB-кодами.
1551
0
В преведущей статье был приведен пример отправки файлов через AJAX с помощью плагина «jQuery Form Plugin». Но файлы...
219
+1