从 JavaScript 打开/保存本地 (JSON) 文件>> IE/火狐

发布于 2024-10-18 08:27:16 字数 782 浏览 3 评论 0原文

我对 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 的示例。

我应该尝试使用 ActiveX，还是有更好的 HTML/JS 方法来保存适用于两种浏览器的文件？

第二个问题是加载 JSON 文件。我发现一旦加载，我可以使用 JSON.parse 将其转换为 JSON var。但我不知道如何加载选定的 JSON 文件。我有一个

<input type=file id="filePath">

获取文件路径的方法（尽管它在两个浏览器中返回不同的内容），并且我希望能够执行类似“

var a = loadFile(filePath.value)

关于如何执行此操作的任何建议？”之类的操作？我真的被困在这里，非常感谢任何帮助。

谢谢。

原文

I'm very new to JS and I'm doing a small html page that -for now- will be ran locally. I have a string in JSON format which I need to be able to store/load as a file on the hard drive.

To be able to store the string, I've got this to work on Firefox:

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

However, it only works on FF, and I need to be able to do it with Internet Explorer also. I've read some stuff about using ActiveX, but I haven't found any example on how to do it.

Should I try and use ActiveX, or is there a better HTML/JS way to save the file which works for both browsers?

The second problem is loading the JSON file. I've found that once loaded, I can turn it into a JSON var with JSON.parse. But I have no idea how to load a selected JSON file. I have an

<input type=file id="filePath">

to get the file path (though it returns different things in both browsers), and I would like to be able to do something like

var a = loadFile(filePath.value)

Any suggestions on how to do it? I'm really stuck here and would greatly appreciate any help.

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白龙吟 2024-10-25 08:27:16

要加载该文件，该文件必须已存在于服务器上。然后可以将其作为脚本的一部分加载（延迟加载或包含在头部中），或者使用 jQuery AJAX 库的 .load() 方法加载。如果服务器上没有，您需要先上传[这是为了防止 XSS]。

您可以使用 .load()、.get() 或完整的 .ajax() jQuery 调用从该点提取数据。看这里： http://api.jquery.com/load/

用于保存数据 - 使用一个 cookie 以这种方式存储数据，将数据发布到新窗口（表单提交），或者如果您仍然希望它在查询字符串中，您的方法应该可以工作。

注意我使用不同的 JSON 库，但下面的代码在 IE 和 FF 中都执行。


  $(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() 等……最终会让你发疯。

To load the file, it must already exist on the server. It can then be loaded as part of your script (either lazy loaded, or include in the head) - or loaded with the .load() method of the jQuery AJAX library. If it isn't on the server, you'll need to do an upload first [this is to prevent XSS].

You can use the .load(), .get() or the full .ajax() jQuery calls to pull the data from that point. Look here: http://api.jquery.com/load/

For the saving of data - use a cookie to store the data that way, post the data into a new window (form submission) or if you still want it in the querystring your method should work.

Note I use a different JSON library but the below executes in both IE and FF.


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

I'd reccomend that to pass it you do something like:


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

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

And a simple form to contain it...

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

This will allow you to pass more (and more complex) objects across without running into URI size limitations, and cross browser functional differences. Plus trying to work out escape(), escapeURIComponent(), etc... will drive you nuts eventually.

回复收藏 0 原文