[英]How to read a text file from server using JavaScript?
在服務器上，有一個文本文件。 在客戶端使用 JavaScript，我希望能夠讀取該文件並對其進行處理。 無法更改服務器上文件的格式。
如何將文件內容放入 JavaScript 變量中，以便進行此處理？ 文件的大小可以高達 3.5 MB，但可以很容易地以 100 行（1 行是 50-100 個字符）的塊進行處理。
文件的任何內容都不應該對用戶可見； 他會看到文件中數據的處理結果。
您可以使用隱藏框架，在其中加載文件並解析其內容。
HTML：
<iframe id="frmFile" src="test.txt" onload="LoadFile();" style="display: none;"></iframe>
JavaScript：
<script type="text/javascript">
function LoadFile() {
var oFrame = document.getElementById("frmFile");
var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
while (strRawContents.indexOf("\r") >= 0)
strRawContents = strRawContents.replace("\r", "");
var arrLines = strRawContents.split("\n");
alert("File " + oFrame.src + " has " + arrLines.length + " lines");
for (var i = 0; i < arrLines.length; i++) {
var curLine = arrLines[i];
alert("Line #" + (i + 1) + " is: '" + curLine + "'");
}
}
</script>
注意：為了使其在 Chrome 瀏覽器中工作，您應該使用--allow-file-access-from-files標志啟動它。 信用。
加載那個巨大的數據塊並不是一個好的計划，但如果你必須這樣做，這里是你如何使用jQuery 的$.ajax()函數來完成它的大綱。
<html><head>
<script src="jquery.js"></script>
<script>
getTxt = function (){
$.ajax({
url:'text.txt',
success: function (data){
//parse your data here
//you can split into lines using data.split('\n')
//an use regex functions to effectively parse it
}
});
}
</script>
</head><body>
<button type="button" id="btnGetTxt" onclick="getTxt()">Get Text</button>
</body></html>
您需要使用 Ajax，它基本上是向服務器發送請求，然后獲取一個 JSON 對象，然后將其轉換為 JavaScript 對象。
檢查這個：
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
如果您使用的是 jQuery 庫，它會更容易：
http://api.jquery.com/jQuery.ajax/
話雖如此，我強烈建議您不要將 3.5MB 的文件下載到 JS 中！ 這不是一個好主意。 在您的服務器上進行處理，然后在處理后返回數據。 然后如果你想得到一個新的數據，發送一個新的 Ajax 請求，在服務器上處理這個請求，然后返回新的數據。
希望有幫助。
我使用了 Rafid 的使用 AJAX 的建議。
這對我有用：
var url = "http://www.example.com/file.json";
var jsonFile = new XMLHttpRequest();
jsonFile.open("GET",url,true);
jsonFile.send();
jsonFile.onreadystatechange = function() {
if (jsonFile.readyState== 4 && jsonFile.status == 200) {
document.getElementById("id-of-element").innerHTML = jsonFile.responseText;
}
}
我基本上（幾乎是字面意思）從http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get2復制了這段代碼，所以一切都歸功於他們。
我對它的工作原理知之甚少，但您不必知道您的制動器如何工作才能使用它們；)
希望這有幫助！
看起來XMLHttpRequest已被Fetch API取代。 谷歌發布了一個很好的介紹，包括這個例子做你想做的事：
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
但是，您可能想要調用response.text()而不是response.json() 。
您需要檢查狀態 0（如使用 XMLHttpRequest 在本地加載文件時，您不會獲得狀態，如果它來自 Web 服務器，則返回狀態）
function readTextFile(file) {
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
對於設備文件讀取使用這個：
readTextFile("file:///C:/your/path/to/file.txt");
從服務器讀取文件使用：
readTextFile("http://test/file.txt");
只是一點點，我看到一些使用innerhtml的答案。 我曾考慮過類似的想法，但我決定不這樣做，在最新版本的反應版本中，相同的過程現在稱為危險的內部 HTML，因為您通過在應用程序中呈現 html 來讓您的客戶進入您的操作系統。 這可能導致各種攻擊以及 SQL 注入嘗試
我真的認為你以錯誤的方式處理這件事。 試圖下載和解析 +3Mb 的文本文件是完全瘋狂的。 為什么不在服務器端解析文件，將結果通過 ORM 存儲到數據庫（您的選擇，SQL 很好，但它也取決於內容鍵值數據在 CouchDB 之類的東西上效果更好）然后使用 ajax 解析數據在客戶端。
另外，如果可能的話，更好的主意是完全跳過文本文件以獲得更好的性能。
如何使用具有完整路徑的JavaScript從服務器讀取文本文件？
[英]How to read a text file from server using JavaScript with complete path?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.