XML，GPX解析器

XML，GPX解析器 -= 1.HTML部分

<!DOCTYPE html>
<html>
  <head>
  <body>
<button id = "coord" onclick= "getExent()"   value=''>点击</button>
  <input type="file" id="fileId"  onchange="loadFile("fileId")" style="display:false">
<button type="button" onclick="OpenLoadFileWindow()">文件</button>
  </body>
</html>

2.js部分

方法：一

function OpenLoadFileWindow(){ 
    document.getElementById("fileId").click(); 
}
function loadFile(fileId) {
    var reader = readFileToString(fileId);//把上传文件解析成String字符串;
        reader.onload = function(evt){ //读取完文件之后会回来这里
            var fileString = evt.target.result; // 读取文件内容
            var xmlDoc =  readXMLString(fileString);
            readTarget(xmlDoc)
            // functName(xmlDoc);
        }
}
/**
*功能 获取解析的XML中的数据
*@param fileId
*/
 function readTarget(xmlDoc){
    var elements = xmlDoc.getElementsByTagName("extensions");
    for (var i = 0; i < elements.length; i++) {
        var name = elements[i].getElementsByTagName("ogr:bridgeid")[0].firstChild.nodeValue;
        var ip = elements[i].getElementsByTagName("ogr:deptkey")[0].firstChild.nodeValue;  
        var geomX = elements[i].getElementsByTagName("ogr:桥梁经度")[0].firstChild.nodeValue;
        var geomy = elements[i].getElementsByTagName("ogr:桥梁纬度")[0].firstChild.nodeValue;        
    }   
}
/**
*功能 把文件解析成UTF-8
*@param fileId
*/        
function readFileToString(fileId,functName){
    var objFile = document.getElementById(fileId);
    if(objFile.value == "") {
        alert("不能空");
    }
    console.log(objFile.files[0].size); // 文件字节数
    var files = $('#'+fileId).prop('files');//获取到文件列表
    // var files = objFile.prop('files');//获取到文件列表
    if(files.length == 0){
        alert('请选择文件');
    }else{
        var reader = new FileReader();//新建一个FileReader
        reader.readAsText(files[0], "UTF-8");//读取文件 
        return reader;
    }
}    
/**
*功能 解析xml字符串
*@param fileId
*/
function readXMLString(xmlString){
var xmlDoc=null;
//判断浏览器的类型
//支持IE浏览器 
if(!window.DOMParser && window.ActiveXObject){   //window.DOMParser 判断是否是非ie浏览器
    var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
    for(var i=0;i<xmlDomVersions.length;i++){
        try{
            xmlDoc = new ActiveXObject(xmlDomVersions[i]);
            xmlDoc.async = false;
            xmlDoc.loadXML(xmlString); //loadXML方法载入xml字符串
            break;
        }catch(e){
        }
    }
}else if(window.DOMParser && document.implementation && document.implementation.createDocument){//支持Mozilla浏览器
    try{
        /* DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。
         * 要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法
         * parseFromString(text, contentType) 参数text:要解析的 XML 标记 参数contentType文本的内容类型
         * 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意，不支持 "text/html"。
         */
        domParser = new  DOMParser();
        xmlDoc = domParser.parseFromString(xmlString, 'text/xml');
    }catch(e){
    }
}
else{
    return null;
}
return xmlDoc;
}

方法：二


    
function OpenLoadFileWindow(){ 
    document.getElementById("fileId").click(); 
}
/**
*功能 获取解析的XML中的数据
*@param fileId
*/
function loadFile(fileId) {
    var reader = readFileToString(fileId,readTarget);//把上传文件解析成String字符串;
}
/**
*功能 获取解析的XML中的数据
*@param fileId
*/
 function readTarget(xmlDoc){
    var elements = xmlDoc.getElementsByTagName("extensions");
    for (var i = 0; i < elements.length; i++) {
        var name = elements[i].getElementsByTagName("ogr:bridgeid")[0].firstChild.nodeValue;
        var ip = elements[i].getElementsByTagName("ogr:deptkey")[0].firstChild.nodeValue;  
        var geomX = elements[i].getElementsByTagName("ogr:桥梁经度")[0].firstChild.nodeValue;
        var geomy = elements[i].getElementsByTagName("ogr:桥梁纬度")[0].firstChild.nodeValue;        
    }   
}
/**
*功能 把文件解析成UTF-8
*@param fileId
*@param functName回调函数
*/        
function readFileToString(fileId,functName){
    var objFile = document.getElementById(fileId);
    if(objFile.value == "") {
        alert("不能空");
    }
    console.log(objFile.files[0].size); // 文件字节数
    var files = $('#'+fileId).prop('files');//获取到文件列表
    // var files = objFile.prop('files');//获取到文件列表
    if(files.length == 0){
        alert('请选择文件');
    }else{
        var reader = new FileReader();//新建一个FileReader
        reader.readAsText(files[0], "UTF-8");//读取文件 
        reader.onload = function(evt){ //读取完文件之后会回来这里
            var fileString = evt.target.result; // 读取文件内容
            var xmlDoc =  readXMLString(fileString);
            functName(xmlDoc);
        }
    }
}    
/**
*功能 解析xml字符串
*@param fileId
*/
function readXMLString(xmlString){
var xmlDoc=null;
//判断浏览器的类型
//支持IE浏览器 
if(!window.DOMParser && window.ActiveXObject){   //window.DOMParser 判断是否是非ie浏览器
    var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
    for(var i=0;i<xmlDomVersions.length;i++){
        try{
            xmlDoc = new ActiveXObject(xmlDomVersions[i]);
            xmlDoc.async = false;
            xmlDoc.loadXML(xmlString); //loadXML方法载入xml字符串
            break;
        }catch(e){
        }
    }
}else if(window.DOMParser && document.implementation && document.implementation.createDocument){//支持Mozilla浏览器
    try{
        /* DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。
         * 要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法
         * parseFromString(text, contentType) 参数text:要解析的 XML 标记 参数contentType文本的内容类型
         * 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意，不支持 "text/html"。
         */
        domParser = new  DOMParser();
        xmlDoc = domParser.parseFromString(xmlString, 'text/xml');
    }catch(e){
    }
}
else{
    return null;
}
return xmlDoc;
}