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样式表单将文件上传到服务器，返回内容（jQuery plugin for AJAX file uploads）
通过普通表单回发提交文件，当重新加载页面时，您可以将内容传递给javascript，并将JSON写入输出
将数据复制/粘贴到textarea中，使用onKeyUp事件检测数据输入（或添加“Process”按钮）以读取textarea内容并从那里开始（sample）

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/>'));

在IE8及以下版本中需要填充{p> Array.map。此外，IE使用new ActiveXObject("Msxml2.XMLHTTP") 这是一个非常简洁的例子。我正在使用asyc false这是坏的而document.write是坏的。但我只想演示获取文件并解析输入。

Answer 3

出于安全原因，javascript中没有文件I / O.最好的办法是在服务器代码中公开这个文本文件，并从javascript中为它调用ajax

Answer 4

var fileRead = "Jason,Red,Tyrannosaurus\nZack,Black,Mastodon\nBilly,Blue,Triceratops\nTrini,Yellow,Griffin";
var lines = fileRead.split("\n");

for (var i in lines){
    var pdata = lines[i].split(",");
    jQuery("#ResultDiv").append("Name: " + pdata[0] + "<br/>Color: " + pdata[1] + "<br/>Avatar: " + pdata[2] + "<br/><br/>" );
}

用Javascript读取外部文件

4 个答案: