javascript - Read xml file, modify the values/add elements/attributes and save the xml how? -


By using javascript, I want to read XML file from disk, modify values ​​/ add elements / attributes and XML back Save on Disk

Anyone here knows what can I find examples that work with IE and Firefox? I already look for examples to read, which is now changing the problem.

Thanks

Assume that you try to read and write discs from the browser And node.Jes, the first step is to use a input tag file to use the file system.

  & lt ;! DOCTYPE html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Input type = "file" id = "input" accept = "text / xml" & gt; & Lt; Script src = "script.js" & gt; & Lt; / Script & gt; & Lt; / Body & gt;  

As soon as a file is selected, we want to remove the body from the element. To do this, a good moment change occurs during the event.

  const input = document.query selector ('#input'); Input.addEventListener ('change', () = & gt; {const file = input.files.item (0);});  

One of the elements is more than one way to parse the blur in a tree. Here I took advantage of the fact that the browser parses XML documents in HTTP requests.

  function blobbed document (blob, callback) {const url = URL.createObjectURL (blob); Const Request = New XMLHttpRequest (); Request.open ('go', url); Request.responseType = 'document'; Request.addEventListener ('Load', () = & gt; {callback (request.response);}); Sent request (); }  

After the Blob has been read, we can manipulate it as if we can manipulate the Dome tree.

  function edit document (document) {const element = document .createElement ('editor'); Element.textContent = 'JavaScript'; Document.firstChild.appendChild (element); Return document; }  

To save the file to disk, we need to reverse the process of parsing, converting the elements tree back into string.

  function DocumentToString (document) {const serializer = new XMLSerializer (); Return Serializer. Cyrillic toaster (document); }  

The file is left to return to disk. To get this, we can trigger a click event on the link with our modified file.

  Function Download (string, mime) {const blob = new blob ([string], {type: mime}); Const a = document.createElement ('a'); Const url = URL.createObjectURL (blob); A.href = url; A.download = 'document.xml'; A.click (); }  

This is the complete code

  const input = document.query selector (' # Input '); Input.addEventListener ('change', () => {const file = input.files.item (0); blobToDocument (file, (xmlDocument) = & gt; {editDocument (xmlDocument); Download (documentToString (xmlDocument) , "Text / xml");});}); Function Blob Toddcast (Blob, Callback) {const url = URL.createObjectURL (Blob); Const Request = New XMLHttpRequest (); Request.open ('go', url); Request.responseType = 'document'; Request.addEventListener ('Load', () = & gt; {callback (request.response);}); Sent request (); } Edit document (document) {const element = document.createElement ('editor'); Element.textContent = 'JavaScript'; Document.firstChild.appendChild (element); Return document; } Function documentToString (document) {const serializer = new XMLSerializer (); Return Serializer. Cyrillic toaster (document); } Download function (string, mime) {const blob = new blob ([string], {type: mime}); Const a = document.createElement ('a'); Const url = URL.createObjectURL (blob); A.href = url; A.download = 'document.xml'; A.click (); }  
  & lt ;! DOCTYPE html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Input type = "file" id = "input" accept = "text / xml" & gt; & Lt; Script src = "script.js" & gt; & Lt; / Script & gt; & Lt; / Body & gt;  


Comments

Popular posts from this blog

sql - dynamically varied number of conditions in the 'where' statement using LINQ -

asp.net mvc - Dynamically Generated Ajax.BeginForm -

Debug on symbian -