javascript 讀取本機檔案

2018-07-01

5619
0
javascript

記錄用

1.javascript

2.html5 Object

3.chrome因為權限問題,故在起動時需加上 --allow-file-access-from-files 方可執行.

準備的檔案

1.readLocalMain.html (主要的Html)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="readLocal.js"></script>
    <title>Javascript 讀取本機檔案</title>
</head>
<body>
    <h1>Javascript 讀取本機檔案</h1>
    <!-- 讀取按鈕 -->
    <button onclick="return getFileMain();">讀取</button>
    <!-- 顯示讀取結果 -->
    <div id="div_display">
    </div>
    <!-- 放置Html5 Object(非顯示) -->
    <div id="myAddObjectDIV" style="display:none">
    </div>
</body>
</html>

2.readLocal 001.html(要讀取的Html) 這邊跟上方為一不同的地方只有 div_display 中有文字而己

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="readLocal.js"></script>
    <title>Javascript 讀取本機檔案</title>
</head>
<body>
    <h1>Javascript 讀取本機檔案</h1>
    <!-- 讀取按鈕 -->
    <button onclick="return getFileMain();">讀取</button>
    <!-- 顯示讀取結果 -->
    <div id="div_display">
        被讀取的Html檔
    </div>
   
</body>
</html>

3.readLocal.js(執行用)

// 主要進入點
function getFileMain() {
    var path = 'readLocal 001.html';
    var divName = "div_display";

    // 1.javascript 
    //getFile_xmlhttp(path, divName);
    // 2.html5 Object
    getFile_Object(path, divName);
    
}

// 1.javascript 
function getFile_xmlhttp(path, divName) {
    var xhr = null;
    try {
        // 用Microsoft.XMLHTTP,如果不行則用XMLHttpRequest 
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
        xhr = new XMLHttpRequest();
    }
    xhr.open("GET", path, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            var data = xhr.responseText; // 讀取的檔案內容
            document.getElementById(divName).innerHTML = data;
        }
    };
    xhr.send();
}

// 2.html5 Object
function getFile_Object(path, divName) {
    // 讀取外部檔案副檔名如果為CSV,則會跳出詢問視窗,故可指定為txt格式(這邊用html)
    document.getElementById('myAddObjectDIV').innerHTML = "<object data='" + path + "' type='text/plain' id='myObjItem' style='display:none'></object>";

    var obj = document.getElementById("myObjItem");
    obj.onload = function () {
          // 指定被讀取的Html中的ID,將其內容顯示於視窗
          var data = obj.contentDocument.getElementById(divName);
          document.getElementById(divName).innerHTML = data.innerHTML;
    }
    return true;
}

javascript

回首頁