letting user open an xml file on client and parse it using javascript - Stack Overflow

admin管理员组

文章数量:1415467

I'm trying to let a users on my site to save and XML file one the local machine and then later to load them using the HTML file element.

Saving the file what done with iFrame.

When trying to let the user load the file i am getting exceptions all the time. I've tried every thing i could find over the web and can't seem to find the way to do it.

I am getting all kind of exception, like cross domain or XMLHttpRequest cannot load file:///C:/fakepath/Regions.xml. Cross origin requests are only supported for HTTP. Depending on the code i tried.

I read that HTML5 standard replace the url with "fakepath", and can't find solution for this. Is there no way to let the user load a file from his own puter to be edited? loading a specific file from server is not a problem but i want to give this freedom to the user and not decide for them what file to load, and also to let them save and load the xml on their puter and not the server

Is there a solution for this problem?

Found this codes but neither helped (and I've tried few other veriations of this):

1)

 var error = "";
                strFile = document.frmLoadFile.selectedFile.value;
                intPos = strFile.lastIndexOf("\\");
                strDirectory = strFile.substring(0, intPos);
                //alert(strDirectory);
                document.frmLoadFile.selectedFile.value = strDirectory;

                var file = 'file:\\\\\\' + document.frmLoadFile.selectedFile.value;
                try //Internet Explorer
                {
                    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                    xmlDoc.async = false;
                    xmlDoc.load(file);
                }
                catch (e) {
                    try //Firefox, Mozilla, Opera, etc.
                    {
                        xmlDoc = document.implementation.createDocument("", "", null);
                        xmlDoc.async = false;
                        xmlDoc.load(file);
                    }
                    catch (e) {
                        try //Google Chrome
                        {
                            var xmlhttp = new window.XMLHttpRequest();
                            xmlhttp.open("GET", file, false);
                            xmlhttp.send(null);
                            xmlDoc = xmlhttp.responseXML.documentElement;
                        }
                        catch (e) {
                            error = e.message;
                        }
                    }
                }

2)

var xmlDoc;
var xmlloaded = false;

function xml_initLibrary(file) {
importXML(file);
}

function importXML(xmlfile) {
try {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", xmlfile, false);
}
catch (Exception) {
    var ie = (typeof window.ActiveXObject != 'undefined');

    if (ie) {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        while (xmlDoc.readyState != 4) { };
        xmlDoc.load(xmlfile);
        xmlloaded = true;
        readXML();
    }
    else {
        xmlDoc = document.implementation.createDocument("", "", null);
        xmlDoc.onload = readXML;
        xmlDoc.load(xmlfile);
        xmlloaded = true;
    }
}

if (!xmlloaded) {
    xmlhttp.setRequestHeader('Content-Type', 'text/xml')
    xmlhttp.send("");
    xmlDoc = xmlhttp.responseXML;
    xmlloaded = true;
    readXML();
}
}

function readXML() {
//console.log(xmlDoc);
}

does any one knows if there is a way to fix this? of do you need to save the files on the server?

Thank you all very much Erez

I'm trying to let a users on my site to save and XML file one the local machine and then later to load them using the HTML file element.

Saving the file what done with iFrame.

When trying to let the user load the file i am getting exceptions all the time. I've tried every thing i could find over the web and can't seem to find the way to do it.

I am getting all kind of exception, like cross domain or XMLHttpRequest cannot load file:///C:/fakepath/Regions.xml. Cross origin requests are only supported for HTTP. Depending on the code i tried.

I read that HTML5 standard replace the url with "fakepath", and can't find solution for this. Is there no way to let the user load a file from his own puter to be edited? loading a specific file from server is not a problem but i want to give this freedom to the user and not decide for them what file to load, and also to let them save and load the xml on their puter and not the server

Is there a solution for this problem?

Found this codes but neither helped (and I've tried few other veriations of this):

1)

 var error = "";
                strFile = document.frmLoadFile.selectedFile.value;
                intPos = strFile.lastIndexOf("\\");
                strDirectory = strFile.substring(0, intPos);
                //alert(strDirectory);
                document.frmLoadFile.selectedFile.value = strDirectory;

                var file = 'file:\\\\\\' + document.frmLoadFile.selectedFile.value;
                try //Internet Explorer
                {
                    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                    xmlDoc.async = false;
                    xmlDoc.load(file);
                }
                catch (e) {
                    try //Firefox, Mozilla, Opera, etc.
                    {
                        xmlDoc = document.implementation.createDocument("", "", null);
                        xmlDoc.async = false;
                        xmlDoc.load(file);
                    }
                    catch (e) {
                        try //Google Chrome
                        {
                            var xmlhttp = new window.XMLHttpRequest();
                            xmlhttp.open("GET", file, false);
                            xmlhttp.send(null);
                            xmlDoc = xmlhttp.responseXML.documentElement;
                        }
                        catch (e) {
                            error = e.message;
                        }
                    }
                }

2)

var xmlDoc;
var xmlloaded = false;

function xml_initLibrary(file) {
importXML(file);
}

function importXML(xmlfile) {
try {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", xmlfile, false);
}
catch (Exception) {
    var ie = (typeof window.ActiveXObject != 'undefined');

    if (ie) {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        while (xmlDoc.readyState != 4) { };
        xmlDoc.load(xmlfile);
        xmlloaded = true;
        readXML();
    }
    else {
        xmlDoc = document.implementation.createDocument("", "", null);
        xmlDoc.onload = readXML;
        xmlDoc.load(xmlfile);
        xmlloaded = true;
    }
}

if (!xmlloaded) {
    xmlhttp.setRequestHeader('Content-Type', 'text/xml')
    xmlhttp.send("");
    xmlDoc = xmlhttp.responseXML;
    xmlloaded = true;
    readXML();
}
}

function readXML() {
//console.log(xmlDoc);
}

does any one knows if there is a way to fix this? of do you need to save the files on the server?

Thank you all very much Erez

• javascript
• xml
• html
• client-side

Share Improve this question Follow edited Dec 19, 2012 at 8:06 Wim Ombelets 5,26533 gold badges4242 silver badges5858 bronze badges asked Oct 17, 2012 at 14:42 ErezErez 1,95355 gold badges2929 silver badges5959 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I think you're looking for FileReader, new in HTML5. For IE < 10 you'll need to use the ActiveX FileSystemObject.

This code works for me on Chrome.

<script type="text/javascript">
function doit(e) {
  var files = e.target.files;
  var reader = new FileReader();
  reader.onload = function() {
    var parsed = new DOMParser().parseFromString(this.result, "text/xml");
    console.log(parsed);
  };
  reader.readAsText(files[0]);
}

document.getElementById("selectfile").addEventListener("change", doit, false);​
</script>

<input type="file" id="selectfile" />

http://jsfiddle/xKuPV/

本文标签： letting user open an xml file on client and parse it using javascriptStack Overflow