HTML5 表單元件：client端，開啟xml文字檔，再轉成xml物件 (下載product.xml)
(要用chrome才能查詢到xml資料)

 


 

1.重要觀念：
在client端是無法用loadxml的方式讀進整個xml物件的，所以若要在client 端讀進xml的資料，變通的方法是，以『字串』的方式讀入(而非xml物件)，讀入後再將字串轉成xml物件

2.步驟1：讀入純文字的步驟

(A) 開啟檔案元件

<input id="file01" type="file" onchange="show02(this)"/>

(B).取得檔案參數
filename = thisfileinfo.files[0].name;
filesize= thisfileinfo.files[0].size;
filetype= thisfileinfo.files[0].type;

(3).讀取純文字檔的內容（取得字串：xmlstring）
function show02(fileinfo) {
file = fileinfo.files[0];
var fReader = new FileReader();
fReader.onload = function (event) {
document.getElementById('txt01').value = event.target.result;
xmlstring = event.target.result;
};
fReader.readAsText(file);
}

(3).步驟2：將字串轉成xml物件:xmlDoc=parser.parseFromString(xmlstring,"text/xml")

if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(xmlstring,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(xmlstring);
}

(4).步驟3：讀取的XML(xmlDoc)如何抓到第2位學生電話tel

第1位學生的姓名:xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue
第1位學生的電話:xmlDoc.getElementsByTagName("tel")[0].childNodes[0].nodeValue
第2位學生的電話:xmlDoc.getElementsByTagName("tel")[1].childNodes[0].nodeValue

(3).讀取的XML(xmlDoc)如何抓到所有學生student的結構資料

man=xmlDoc.getElementsByTagName("student");
*第3位學生的電話:man[2].getElementsByTagName("tel")[0].childNodes[0].nodeValue
*印出所有學生student的姓名:

for (i=0;i<man.length;i++)
{
document.write(man[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
}

5.xml字串與xmlDoc節點變數彼此轉換的公式

//將xml字串轉成xmlDoc節點變數:
xmlDoc =parser.parseFromString(txt,"text/xml");

//將字串轉成xmlDoc節點變數
if (window.DOMParser) {
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
} else // Internet Explorer {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}

//將xml物件轉成xml字串:
xmlString =(new XMLSerializer()).serializeToString(xmlDoc)

//將xml物件轉成string文字
if (window.ActiveXObject) { // for IE 瀏覽器
txt01.value = xmlDoc.xml;
} else { //chrome, firefox,Opera各種瀏覽器
txt01.value = (new XMLSerializer()).serializeToString(xmlDoc);
}