实现功能：1、拖拽上传文件；2、解析xml文件。
js实现拖拽上传文件参考：http://www.cnblogs.com/caonidayecnblogs/archive/2010/09/09/1821925.html。
js xml解析参考：http://www.cnblogs.com/chjw8016/archive/2011/07/12/2104269.html
上面的解析谷歌浏览器会有问题，解决方法，参考：http://www.iteye.com/problems/65523
读取文件的Reader详解：http://www.cnblogs.com/fsjohnhuang/p/3925827.html
侦听document的dragover和drop事件来阻止浏览器的默认处理。需要阻止drop能理解，必须加上dragover不知道为什么。
写了个demo，拖动一个xml，加载，解析，并显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.ctrol_name{
background-color: #cc0000;
}
.att_name{
background-color: #00cc00;
}
</style>
<script>
window.onload=function(){
var dropbox=document.getElementById("dropbox");
dropbox.addEventListener("dragenter", function(e) {
e.stopPropagation();
e.preventDefault();
dropbox.style.borderColor = 'gray';
dropbox.style.backgroundColor = 'white';
}, false);
dropbox.addEventListener("dragleave", function(e) {
dropbox.style.backgroundColor = 'transparent';
}, false);
dropbox.addEventListener("dragover", function(e) {
e.stopPropagation();
e.preventDefault();
}, false);
dropbox.addEventListener("drop", function(e) {
e.stopPropagation();
e.preventDefault();
handleFiles(e.dataTransfer.files);
//submit.disabled = false;
}, false);
document.addEventListener("dragover", function(e) {
e.stopPropagation();
e.preventDefault();
}, false);
document.addEventListener("drop", function(e) {
e.stopPropagation();
e.preventDefault();
}, false);
}
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
console.log(file);
/*
var reader = new FileReader();
console.log(FileReader);
console.log(reader);
var n=0;
reader.onload = function(e) {
console.log(e);
console.log(e.target.result);
n++;
if(n==1){reader.readAsText(file);}
if(n==2){reader.readAsBinaryString(file);}
if(n==3){reader.readAsArrayBuffer(file);}
};
reader.readAsDataURL(file);
*/
var reader = new FileReader();
reader.onload = function(e) {
console.log(e);
//console.log(e.target.result);
var xmlDoc=loadXMLString(e.target.result);
console.log(xmlDoc);
document.write(document.getElementsByTagName("style")[0].outerHTML);
document.write("<table border='1'>");
var x = xmlDoc.getElementsByTagName("Controls")[0];
for (i = 0; i < x.children.length; i++) {
var node=x.children[i];
document.write("<tr class='ctrol_name'><td>");
document.write(node.nodeName);
document.write("</td></tr>");
document.write("<tr class='att_name'><td>属性名</td><td>默认值</td><td>类型</td><td>备注</td></tr>");
for(j=0;j<node.children.length;j++){
var node2=node.children[j];
document.write("<tr>");
document.write("<td>"+node2.getAttribute("name")+"</td>");
document.write("<td>"+node2.getAttribute("default")+"</td>");
document.write("<td>"+node2.getAttribute("type")+"</td>");
document.write("<td>"+node2.getAttribute("comment")+"</td>");
document.write("</tr>");
}
}
document.write("</table>");
};
reader.readAsText(file);
}
}
function loadXML(xmlFile) {
var xmlDoc = null;
//判断浏览器的类型
//支持IE浏览器
if (!window.DOMParser && window.ActiveXObject) {
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]);
break;
} catch (e) {}
}
}
//支持Mozilla浏览器
else if (document.implementation && document.implementation.createDocument) {
try {
/* document.implementation.createDocument('','',null); 方法的三个参数说明
* 第一个参数是包含文档所使用的命名空间URI的字符串；
* 第二个参数是包含文档根元素名称的字符串；
* 第三个参数是要创建的文档类型（也称为doctype）
*/
xmlDoc = document.implementation.createDocument('', '', null);
} catch (e) {}
} else {
return null;
}
if (xmlDoc != null) {
if(xmlDoc.load){
xmlDoc.async = false;
console.log(xmlDoc);
xmlDoc.load(xmlFile);
}
else{
var xmlhttp = new window.XMLHttpRequest();
console.log(xmlhttp);
xmlhttp.open("GET",xmlFile,false);
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML.documentElement;
}
}
return xmlDoc;
}
function loadXMLString(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) {}
}
}
//支持Mozilla浏览器
else if (window.DOMParser && document.implementation && document.implementation.createDocument) {
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;
}
</script>
</head>
<body>
<div name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px dashed silver;"></div>
</body>
</html>
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。