让用户在客户端上打开一个xml文件并使用javascript解析它

2019-09-01 17:35:36 阅读：267 来源： 互联网

我试图让我的网站上的用户将XML文件保存到本地计算机,然后再使用HTML文件元素加载它们.

保存文件使用iFrame完成的操作.

当试图让用户加载文件时,我一直都会遇到异常.
我已经尝试过我能在网上找到的所有东西,似乎无法找到方法.

我得到了各种异常,比如跨域或XMLHttpRequest无法加载file：/// C：/fakepath/Regions.xml.仅支持HTTP的跨源请求.
根据我尝试的代码.

我读到HTML5标准用“fakepath”替换url,并且找不到解决方案.有没有办法让用户从他自己的计算机加载文件进行编辑？从服务器加载一个特定的文件不是问题,但我想给用户这个自由,而不是决定加载什么文件,还让他们在他们的计算机而不是服务器上保存和加载xml

有这个问题的解决方案吗？

发现这些代码但没有帮助(我已经尝试了很少的其他验证)：

 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;
                        }
                    }
                }

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);
}

有没有人知道是否有办法解决这个问题？你需要保存服务器上的文件吗？

非常感谢你们
埃雷兹

解决方法:

我想你正在寻找新的HTML5 FileReader.对于IE< 10你需要使用ActiveX FileSystemObject.

此代码适用于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.net/xKuPV/

标签：javascript,html5,xml,client-side
来源： https://codeday.me/bug/20190901/1784981.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

让用户在客户端上打开一个xml文件并使用javascript解析它