用javascript加載和讀取本地文本文件的最簡單方法？

Question

我有一個要加載的.csv文件，其中包含.HTML頁將自行格式化的信息。 我不知道該怎么做，

這是文件的簡單圖像： http : //i.imgur.com/GHfrgff.png

我已經研究了HTML5的FileReader ，似乎可以完成工作，但似乎需要使用輸入表單。 我只想加載文件並能夠訪問其中的文本並按我認為合適的方式進行操作。

這篇文章提到了AJAX，但是實際情況是，該網頁只能在本地部署，因此有點麻煩。

通常如何做？

Answer 1

由於您的網頁和數據文件位於同一目錄中，因此您可以使用AJAX讀取數據文件。 但是，我從圖像中的圖標中注意到您正在使用Chrome。 默認情況下，Chrome僅阻止該功能並報告訪問沖突。 要允許讀取數據文件，您必須使用命令行選項--allow-file-access-from-files調用Chrome。

一種可能對您有用的替代方法是使用將文件拖放到您的網頁上。 請參閱首選的DOM參考以獲取“拖放文件”。

Answer 2

您完全可以向本地文件發出ajax請求，然后取回其內容。

如果您使用的是jQuery，請查看$.get()函數，該函數將以變量形式返回文件的內容。 您只需在參數中傳遞文件的路徑，就像查詢“正常” URL一樣。

Answer 3

您不能出於安全目的發出跨域ajax請求。 那就是擁有api的全部意義。 但是，您可以使用$.get請求URL制作一個api。

解決方案是使用YQL（雅虎查詢語言），這是一個非常漂亮的工具，可用於從幾乎任何網站進行api調用。 因此，您可以輕松讀取文件的內容並使用它。

您可能需要查看官方文檔和YQL控制台

我還寫了一篇博客文章，專門針對使用YQL跨域ajax請求。 希望能幫助到你

Answer 4

您可以嘗試AJAX（如果不需要異步處理，請將“ async”設置為false。該版本在我嘗試通過本地Web服務器（地址包含“ localhost”）使用的任何瀏覽器中運行，並且文本文件確實位於如果您想通過文件系統啟動頁面（地址以“ file”開頭），則Chrome（可能還有Safari，但不是Firefox）會生成“ Origin null上面提到的錯誤。請參閱此處的討論。

    $.ajax({
        async: false,
        type: "GET",
        url: "./testcsv.csv",
        dataType: "text",
           contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        success: function (data) {
             //parse the file content here
           }
        });

但是，使用腳本文件將設置包含為Phrogz提到的變量的想法在您的方案中可能是可行的選擇。 我使用的是“ Ini”格式的文件，供用戶更改。