HTML5에서 XML 파일을로드, 편집 및 저장할 수있는 방법

xml 파일을 html5 페이지로로드해야하므로 사용자가이 파일을 편집 할 수 있으며 나중에 다시 저장해야합니다.HTML5에서 XML 파일을로드, 편집 및 저장할 수있는 방법

나는 그물을보고 적당한 시간을 찾을 수 없었습니다 ... 나는 많은 튜토리얼을로드하고 자바 스크립트로 XML 파일을 구문 분석하는 방법을 찾았지만 그 파일을 저장하는 방법을 알지 못합니다. Javascript가 잘못된 대답입니까?

편집 : 자바 스크립트는 서버 상호 작용없이이 문제

출처

2011-01-20 boris

Downloadify 브라우저에서, 즉석에서 파일의 생성 및 저장을 할 수있는 작은 자바 스크립트 + 플래시 라이브러리가에 대한 잘못된 해결책이 될 수 있습니다.

출처

2011-01-20 13:03:01 ahmed

아니라, 플래시가 더 이동하지 않습니다. 이 프로젝트에 html5 기술을 사용해야합니다. – boris

이것은 꽤 오래되었지만 현재 동일한 문제를 해결하고 있기 때문에 어쨌든 답할 수있을 것이라고 생각했습니다. 이를 수행하는 올바른 방법은 수정 된 파일을 키/값 저장소에 저장하는 것입니다 (Web Storage - http://www.w3.org/TR/webstorage/).

원래 파일을 교체해야하는 경우 웹 서버를 거쳐 수정 된 파일을 웹 서버의 올바른 URL에 넣거나 게시해야합니다. 이것은 사소한 백엔드를 작성하여 파일을 가져 와서 저장하는 것을 의미합니다.

다음은 간단한 저장 코드 - 당신은 코드에서 적절한 위치에있는 파일에 대한 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>

출처

2011-11-18 00:07:50 Guy

HTML5에서 XML 파일을로드, 편집 및 저장할 수있는 방법

답변

관련 문제