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