2011-01-20 79 views
0

我需要將一個xml文件加載到html5頁面中,用戶現在可以編輯此文件,之後我需要再次保存它。如何在HTML5中加載,編輯和保存XML文件

我在網上找了幾天找不到合適的東西...我發現很多教程如何加載和解析JavaScript的XML文件,但我不知道如何保存這些。 Javascript是這個錯誤的答案。

編輯:JavaScript的可能是這個問題

回答

0

Downloadify是一個很小的JavaScript + Flash庫,使上飛文件的生成和保存,在瀏覽器中錯誤的解決方法,而無需服務器交互。

+2

好,一晃就是沒有去。我需要爲這個項目使用html5技術 – boris 2011-01-20 13:11:27

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>