在服务器上，有一个文本文件。在客户端上使用 JavaScript，我希望能够读取该文件并对其进行处理。无法更改服务器上文件的格式。
我怎样才能将文件的内容放入 JavaScript 变量中，以便进行此处理？文件的大小最大为 3.5 MB，但可以轻松地以 100 行（1 行是 50-100 个字符）的块的形式进行处理。
文件的任何内容都不应该对用户可见；他会看到文件中数据的处理结果。
【问题讨论】：
标签： javascript ajax file-io
您需要使用 Ajax，它基本上是向服务器发送请求，然后获取 JSON 对象，然后将其转换为 JavaScript 对象。
检查一下：
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
如果你使用的是 jQuery 库，那就更简单了：
http://api.jquery.com/jQuery.ajax/
说了这么多，我强烈建议大家不要把3.5MB的文件下载成JS！这不是一个好主意。在您的服务器上进行处理，然后在处理后返回数据。然后如果你想获取一个新的数据，发送一个新的 Ajax 请求，在服务器上处理请求，然后返回新的数据。
希望对您有所帮助。
【讨论】：
加载庞大的数据块不是一个好计划，但如果必须，这里是使用jQuery's $.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>
【讨论】：
您可以使用隐藏框架，在其中加载文件并解析其内容。
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 标志来启动它。 credit.
【讨论】：
--allow-file-access-from-files 启动 Chrome
我真的认为你以错误的方式处理这件事。试图下载和解析一个 +3Mb 的文本文件是完全疯狂的。为什么不在服务器端解析文件，将结果通过 ORM 存储到数据库中（您的选择，SQL 很好，但它也取决于内容键值数据在 CouchDB 之类的东西上效果更好）然后使用 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 复制了这段代码，所以一切都归功于他们。
我不太了解它是如何工作的，但您不必知道刹车是如何工作的；）
希望这会有所帮助！
【讨论】：
您需要检查状态 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");
【讨论】：
看起来XMLHttpRequest 已被Fetch API 取代。谷歌发布了一个很好的introduction，其中包括这个例子做你想做的事：
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()。
【讨论】：
只是一个小点，我看到一些使用innerhtml的答案。我有过类似的想法，但也决定不这样做，在最新版本的 react 版本中，相同的过程现在称为危险的innerhtml，因为您通过在应用程序中显示 html 为您的客户提供了进入您的操作系统的方法。这可能导致各种攻击以及 SQL 注入尝试
【讨论】：