Открыть / сохранить локальный (JSON) файл из JavaScript >> IE / Firefox - PullRequest
Новая
       27

Открыть / сохранить локальный (JSON) файл из JavaScript >> IE / Firefox

11 голосов
/ 22 февраля 2011

Я очень новичок в JS, и я делаю небольшую HTML-страницу, которая пока что будет запускаться локально. У меня есть строка в формате JSON, которую нужно сохранить / загрузить в виде файла на жестком диске.

Чтобы иметь возможность хранить строку, у меня есть это для работы с Firefox: 

function saveJSON() {
    var obj = {name:'John', max:100};
    window.open( "data:text/json;charset=utf-8," + escape(JSON.stringify(obj)))
}

Тем не менее, он работает только на FF, и я должен быть в состоянии сделать это также с Internet Explorer. Я читал кое-что об использовании ActiveX, но я не нашел ни одного примера, как это сделать.

Стоит ли использовать ActiveX или есть лучший способ сохранить файл в формате HTML / JS, который работает для обоих браузеров?

Вторая проблема - загрузка файла JSON. Я обнаружил, что после загрузки я могу превратить его в переменную JSON с помощью JSON.parse. Но я понятия не имею, как загрузить выбранный файл JSON. У меня есть 

<input type=file id="filePath">

чтобы получить путь к файлу (хотя он возвращает разные вещи в обоих браузерах), и я хотел бы иметь возможность сделать что-то вроде 

var a = loadFile(filePath.value)

Любые предложения о том, как это сделать? Я действительно застрял здесь и был бы очень признателен за любую помощь.

Спасибо.

Ответы [ 3 ]

6 голосов
/ 22 февраля 2011

Чтобы загрузить файл, он должен уже существовать на сервере. Затем он может быть загружен как часть вашего сценария (загружен лениво или включен в заголовок) - или загружен с помощью метода .load () библиотеки JQuery AJAX. Если его нет на сервере, вам сначала нужно выполнить загрузку [чтобы предотвратить XSS].

Вы можете использовать .load (), .get () или полные вызовы .ajax () jQuery для извлечения данных из этой точки. Смотрите здесь: http://api.jquery.com/load/

Для сохранения данных - используйте cookie для хранения данных таким образом, разместите данные в новом окне (отправка формы) или, если вы все еще хотите, в строке запроса ваш метод должен работать.

Примечание. Я использую другую библиотеку JSON, но приведенная ниже выполняется как в IE, так и в FF. 

<code>
  $(document).ready(function() {
    var obj = { name: 'John', max: 100 };
    window.open("data:text/json;charset=utf-8," + escape($.toJSON(obj))) 
  })

Я бы порекомендовал, чтобы передать его, вы делаете что-то вроде: 


  function saveJSON(){
    var obj = {};
    obj.name = 'John';
    obj.max = 100;

    $("#json").val($.toJSON(obj));
    $("#hiddenForm").submit();
  }

И простая форма, чтобы содержать это ... 

<form action="somepageToDisplayFormFields.php" target="_blank" id="hiddenForm">
  <input type="hidden" name="json" id="json" />
</form>

Это позволит вам передавать более (и более сложные) объекты, не сталкиваясь с ограничениями размера URI и кросс-браузерными функциональными различиями. Кроме того, попытка выполнить escape (), escapeURIComponent () и т. Д. ... в конечном итоге сведет вас с ума.

2 голосов
/ 22 февраля 2011

Ну, я нашел решение для чтения файла на стороне клиента, которое работает довольно хорошо.Это также не совсем небезопасно, поскольку « прямое и преднамеренное вмешательство пользователя требуется для предоставления отдельных файлов скрипту ».В настоящее время он работает только для меня в Firefox, так что, думаю, мне придется с этим ограничиться.

Спасибо всем за ваши комментарии и ответы;они были очень полезны, и я многому научился.

1 голос
/ 22 февраля 2011

Прямые манипуляции с файловой системой - это то, что обычно не допускается в клиентском javascript (по уважительной причине. Do you хотите, чтобы случайные сайты копались в ваших файлах?))

тем не менее, вы можете более или менее достичь своей первой цели, просто сделав свой JSON ссылкой для загрузки - поместите свой URL-адрес DATA в ссылку, и должно работать в IE, начиная с IE8.со старыми IE ты SOL.

Что касается получения файла JSON по пути, есть свойство PROPRIETARY, FIREFOX ONLY, которое позволяет вам сделать это.задокументировано здесь: https://developer.mozilla.org/en/DOM/File

...