如何在HTML5中加载,编辑和保存XML文件

时间:2011-01-20 12:55:57

标签: xml html5

我需要将一个xml文件加载到一个html5页面,用户现在可以编辑这个文件,之后我需要再次以某种方式保存它。

我在网上看了好几天找不到合适的东西......我发现很多教程如何使用javascript加载和解析xml文件,但我无法弄清楚如何保存这些。 Javascript是错误的答案。

编辑:javascript可能是此问题的错误解决方案

2 个答案:

答案 0 :(得分:0)

Downloadify是一个很小的JavaScript + Flash库,可以在浏览器中动态生成和保存文件,而无需服务器交互。

答案 1 :(得分:0)

这已经很老了,但我想我无论如何都会回答它,因为我正在解决同样的问题。正确的方法是将修改后的文件存储在键/值存储(Web存储 - http://www.w3.org/TR/webstorage/)中。

如果您需要替换原始文件,则应通过Web服务器并将修改后的文件放到或发布到Web服务器上的正确URL。这意味着编写一个简单的后端来获取文件并保存它。

以下是简单的存储代码 - 您必须在代码中的适当位置插入文件和文件名:

<!DOCTYPE html> 
<html>  
  <head>
    <title>File editor</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("jquery", "1.4.1");
    </script>
    <script>
      $(document).ready(function() {

        // check to see if we have it in storage already
        if (file = localStorage.getItem('<filename>')) {
          $("textarea[id='edit_box']").val(file);
        } else { // get it from the url
          $.get("<url to file>", null, function(data)
          {
            $("textarea[id='edit_box']").val(data);
          }, "text");
        }

        // save to storage
        $("textarea[id='edit_box']").bind('keyup', function () {
          localStorage.setItem('<filename>', this.value);
        });
      });
    </script>
  </head>
  <body>
    <form method="get" id="edit_file">
      <input type="file"></input>
      <div id="edit">
        <textarea id="edit_box" placeholder="Type here" cols="80" rows="50"></textarea>
      </div>
  </body>
</html>