閱讀文本文件的jQuery/Javascript .get方法

我剛開始在Javascript中使用一些正則表達式來處理我的作業。我似乎無法弄清楚如何使用jQuery方法.get（）實際將文本文件中的數據讀入變量。當我嘗試我的代碼沒有任何反應。它似乎從來沒有進入.get（）部分。這裏是我的代碼：閱讀文本文件的jQuery/Javascript .get方法

JS文件：

document.getElementById('file').onchange = function(){ 
var file = "New Text Document.txt"; //this will later be the selected file 

$.get(file,function(data){ 
    var myVar = data; 
    $("#123").html(myVar); 
}); 
};

HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
<title>animacija</title> 
<meta charset="UTF-8"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 
<body> 

<input type="file" name="file" id="file"> 
<script type="text/javascript" src="func.js"></script> 

<div id="123"></div> 

</body> 
</html>

來源

2017-03-02 Luki

可能重複的[jquery - 讀取文本文件？]（http://stackoverflow.com/questions/1981815/jquery-read-a-text-file） – Liam

您是否正在瀏覽器中的HTML頁作爲服務器託管的'http：'（或'https：'）頁面，還是'file：'文件？如果'http：'，你試圖閱讀的文本資源是否也託管在同一臺服務器上？ – apsillers

作爲文件:,文本資源與我的http和js文檔位於同一目錄中。 – Luki

大多數瀏覽器將不允許file:資源讀取其它本地文件。這是爲了防止下載的HTML文檔在打開時立即開始讀取（並傳輸）硬盤驅動器（或至少您的下載文件夾）的內容的攻擊。

您需要知道的另一件事是，$.get用於從HTTP服務器獲取資源，而file輸入用於允許用戶從其本地驅動器中選擇文件。我認識到你的情況有點令人困惑，因爲你的網頁在本地硬盤上是，但想象一下，如果你的HTML和腳本是在線託管的，而其他一些用戶（而不是你）正在使用它們來處理他們自己的本地存儲的文件。

MDN有一個關於如何get started with <input type="file"> inputs的好教程。

來源

2017-03-02 17:14:21 apsillers

由於交叉來源的限制，代碼在本地不起作用。
在遠程服務器上運行並且所有文件都在同一文件夾中時，它工作正常。

如果你想讀本地文件（又名通過文件輸入由用戶選擇文件），你可以閱讀更多關於FileAPI這裏：

https://www.html5rocks.com/en/tutorials/file/dndfiles/

來源

2017-03-02 17:14:28 Ezenhis

的代碼片段似乎是確定的，但它將不會在本地工作，因爲$.get用於ajax請求，並且需要完整的可用服務器路徑。我建議你使用FileReader API。

HTML

<title>animacija</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<body> 
    <input type="file" name="file" id="file"> 
    <div id="123"></div> 
</body>

的JavaScript

document.getElementById('file').onchange = function() { 

    var file = this.files[0]; 
    var FR = new FileReader(); 

    FR.readAsText(file); 
    FR.onload = function(data) { 
    var myVar = data.target.result; 
    $("#123").html(myVar); 
    } 
};

JSFiddle

希望工程爲您服務！

來源

2017-03-02 17:32:26 gtrenco

閱讀文本文件的jQuery/Javascript .get方法

回答

相關問題