Javascript，如何讀取本地文件？

Question

我嘗試從服務器讀取本地文件。 我一直在“谷歌搜索”這個話題一段時間，有人說這是不可能的，其他人說可以做到。 在這次搜索中，我發現了這個腳本：

使用 xmlhttprequest 讀取文件

如果您的 javascript 應用程序的 HTML 文件已保存到磁盤，這是一種讀取數據文件的簡單方法。 寫出更復雜，需要 ActiveX object (IE) 或 XPCOM (Mozilla)。

fname - 文件的相對路徑

回調 - function 以文件文本調用

function readFileHttp(fname, callback) {

    xmlhttp = getXmlHttp();

    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState==4) { 

            callback(xmlhttp.responseText); 

        }

    }

    xmlhttp.open("GET", fname, true);

    xmlhttp.send(null);

}

返回一個跨瀏覽器的 xmlhttp 請求 object

function getXmlHttp() {

    if (window.XMLHttpRequest) {

        xmlhttp=new XMLHttpRequest();

    } else if (window.ActiveXObject) {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    if (xmlhttp == null) {

        alert("Your browser does not support XMLHTTP.");

    }

    return xmlhttp;

}

但是不知道怎么用，回調function應該怎么看？ 您能否提供使用這些功能的示例代碼？

Answer 1

能夠從您的瀏覽器讀取本地文件將是對安全性的重大破壞 - 我不喜歡我訪問的任何網站能夠在我的瀏覽器中運行可以從我的硬盤驅動器讀取文件的代碼的想法。 通常，ajax 請求僅限於頁面源自的域。 （但是，您可以使用 JSONP 等技術在一定程度上解決此問題。）即使頁面源自本地文件系統，大多數瀏覽器也不會讓您讀取本地文件。

提到的其他方法應該允許您從域（即使它是 localhost）讀取文件，但不能直接從文件系統讀取文件。

Answer 2

在 activeX 腳本下方查找以讀取本地文件。 （在 IE 中工作正常）。

    var fso = new ActiveXObject("Scripting.FileSystemObject");
    //specify the local path to Open
    var file = fso.OpenTextFile("C:\\your path\\ filename", 1);
    var fileContent = file.ReadAll();
    file.Close();

    //Parse the contents
    // ex: if the content is in JSON format
    var obj = eval('(' + fileContent+ ')');

    for (var i = 0; i < obj.length; i++) {
        //Access each element
        alert(obj[i].name);
    }

Answer 3

以下代碼將瀏覽文件並將內容復制到文本區域：

   <input type="file" id="fileinput" />
    <script type="text/javascript">
      function readSingleFile(evt) {
        //Retrieve the first (and only!) File from the FileList object
        var f = evt.target.files[0]; 

        if (f) {
          var r = new FileReader();
          r.onload = function(e) { 
              var contents = e.target.result;
            alert( "Got the file.\n" 
                  +"name: " + f.name + "\n"
                  +"type: " + f.type + "\n"
                  +"size: " + f.size + " bytes\n"
                  + "starts with: " + contents.substr(1, contents.indexOf("\n"))
            );  
            document.getElementById('area').value=  contents;
          }
          r.readAsText(f);

        } else { 
          alert("Failed to load file");
        }
      }

      document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
    </script>

    <textarea rows=20 id="area"></textarea>

Answer 4

使用 javascript，您只能讀取服務器上公開的文件。 它類似於在瀏覽器中打開它...

我建議使用 jQuery 庫來執行此操作，使用此功能的 ajax 請求要容易得多，並且所有主要瀏覽器都支持：

http://api.jquery.com/jQuery.get/

例如，您可以這樣做：

$.get('/content/test.html', function(data) {
  alert(data);
});

Answer 5

您作為回調傳入的 function 應包含實際處理初始 ajax 調用結果的代碼。 例如，最簡單的：

alert("RESPONSE: " + xmlhttp.responseText;

但是，我們需要澄清您要執行的操作：讀取存儲在服務器上的文件？ 如果是這樣，則必須可以從 web 訪問該目標文件（以便您可以將其 URL 傳遞給您的 ajax 調用），否則您的代碼將無法正常工作。