用Javascript读取外部文件

Question

我有一个可变长度的外部文本文件，名为profiles.txt，其中的信息具有以下格式：

 Jason/Red/Tyrannosaurus
 Zack/Black/Mastodon
 Billy/Blue/Triceratops
 Trini/Yellow/Griffin
 (etc)

如何使用JavaScript读取文件以输出以下HTML：

 Name: Jason<br>
 Color: Red<br>
 Avatar: Tyrannosaurus<br>
 <br>
 Name: Zack<br>
 Color: Black<br>
 Avatar: Mastodon<br>
 <br>
 (etc)

Answer 1

仅当文件不在服务器上时才适用（未在问题中指定）

如果不将文件发布到服务器或将文件内容粘贴到文本框中，JavaScript 目前无法直接与文件系统交互。

同样出于安全原因，javascript 本身可能不会查看使用文件类型输入选择的文件的内容。

所以，你的选择是：

• 使用 AJAX 样式的表单发布将文件上传到服务器，返回内容（用于 AJAX 文件上传的 jQuery 插件）
• 通过正常形式的回发提交文件，当页面重新加载时，您可以将内容传递给 javascript，并将 JSON 写入输出
• 将数据复制/粘贴到 textarea 中，使用 onKeyUp 事件检测数据输入（或添加“处理”按钮）以读取 textarea 内容并从那里开始（示例）

Answer 2

这是使用XMLHttpRequest的示例：

var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open('GET', "test.txt", false);
xmlhttp.send();
document.write(xmlhttp.responseText.split('\r\n').map(function (i) {return i.replace(/(.+),(.+),(.+)/g, 'Name: $1<br>Color: $2<br>Avatar: $3<br>')} ).join('<br/>'));

Array.map需要在IE8及以下版本中进行填充。另外，IE使用new ActiveXObject("Msxml2.XMLHTTP") 这是一个非常精简的示例。我使用的是asyc false，这很不好，而document.write则是不好的。但是我只是想演示如何获取文件并解析输入。