Работа с файлами 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