Страницы

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

понедельник, 9 декабря 2019 г.

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

#javascript #html


У меня 5 текстовых полей, в которых лежат некие значения. 

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

Поиск в Google не дал результатов, ибо решения я нашел только на PHP.
    


Ответы

Ответ 1



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" даст вам множество дополнительных подсказок и примеров ;)

Ответ 2



Есть несколько вариантов со своими преимуществами и недостатками. Посмотрите предлагаемые решения здесь и здесь. Примеры решений: 1) генерировать файл и по ссылке предлагать пользователю его скачать. Реализация: function download(text, name, type) { var a = document.getElementById("a"); var file = new Blob([text], {type: type}); a.href = URL.createObjectURL(file); a.download = name; } click here to download your file 2) Использовать FileSystem API - http://www.html5rocks.com/en/tutorials/file/filesystem/ См. также https://developers.google.com/web/updates/2011/08/Saving-generated-files-on-the-client-side

Ответ 3



Если вы хотите использовать javascript для этих целей, то вам подходит node.js

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

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