Страницы

Поиск по вопросам

понедельник, 22 октября 2018 г.

Работа с файлами js

У меня 5 текстовых полей, в которых лежат некие значения.
Как реализовать экспорт и импорт в файл? Т.е суть в том, чтобы все введенные значения ушли в файл, и позже их можно было открыть.
Поиск в Google не дал результатов, ибо решения я нашел только на PHP.


Ответ

File System API - не стандартизированное и не утверждённое W3C API, которой будет работать только в браузерах на движке Blink. Этот вариант подойдёт Вам только в том случае, если Вы пишите дополнение для Chrome или веб-аппликацию под конкретный браузер.
Если нет, то используйте стандартизированный FileReader API, который работает почти на всех современных браузерах
Пример записи и чтения файла (или нескольких):
HTML:



Скачать файл
JavaScript:
var inputElement = document.getElementById('input'), downloadElement = document.getElementById('download'), textareaElement = document.getElementById('textarea');
downloadElement.style.display = 'none';
inputElement.onchange = function() { var fileList = this.files, // список указанных файлов textFile = fileList[0]; // для нашего примера берём один файл // Проверяем тип файла (текстовой файл) if (textFile.type == 'text/plain') { // Создаём новый FileReader, который и будет читать наш файл var reader = new FileReader(); // Событие успешного чтения reader.onloadend = function(event) { var text = event.target.result, blob = new Blob([text], { type: 'text/plain' }); // Ваши любые манипуляции с данными textareaElement.value = text; downloadElement.style.display = 'block'; downloadElement.href = URL.createObjectURL(blob); downloadElement.download = textFile.name; }; // Событие ошибки reader.onerror = function() { alert('Ошибка чтения файла!'); }; // Читаем наш файл как текст reader.readAsText(textFile); } else { alert('Это не текстовой файл!'); } };
textareaElement.onkeyup = function() { // Обновляем ссылку скачивания файла // (ТОЛЬКО ДЛЯ ПРИМЕРА, СКРИПТ ВЫПОЛНЯЕТСЯ ПРИ КАЖДОМ НАЖАТИИ КЛАВИШИ) var text = this.value, blob = new Blob([text], { type: 'text/plain' }); downloadElement.href = URL.createObjectURL(blob); };
П.С. Не могу добавить в ответ больше двух ссылок (из-за ограничения по репутации) но поиск по "FileReader API" даст вам множество дополнительных подсказок и примеров ;)

Комментариев нет:

Отправить комментарий