How can I load, edit and save an XML-file in HTML5
I need to load an xml file into a html5 page, the user can now edit this file and afterwards I need to save it somehow again.
I was looking on the net for days couldn't find anything suitable... the i found many tutorials how to load and parse xml files with javascript, but I cant figure out how to save those. Is Javascript the wrong answ开发者_JS百科er for this.
EDIT: javascript might be the wrong solution for this issue
Downloadify is a tiny JavaScript + Flash library that enables the generation and saving of files on the fly, in the browser, without server interaction.
This is pretty old, but I thought I'd answer it anyway since I'm currently solving the same problem. The right way to do this is to store the modified file in the key/value store (Web Storage - http://www.w3.org/TR/webstorage/).
If you need to replace the original file, you should go through a web server and put or post the modified file to the correct url on the web server. This means writing a trivial backend to take the file and save it.
Here is the simple storage code - you'll have to insert a url to the file and the filename at the appropriate places in the code:
<!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>
加载中,请稍侯......
精彩评论