使用 Javascript 读取外部文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7406209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
read external file with Javascript
提问by Henry Yun
I have an external textfile of variable length named profiles.txtwith information in the following format:
我有一个名为profiles.txt的可变长度外部文本文件，其中包含以下格式的信息：
Jason/Red/Tyrannosaurus
Zack/Black/Mastodon
Billy/Blue/Triceratops
Trini/Yellow/Griffin
(etc)
How can I read through the file using JavaScript to output the following HTML:
如何使用 JavaScript 读取文件以输出以下 HTML：
Name: Jason<br>
Color: Red<br>
Avatar: Tyrannosaurus<br>
<br>
Name: Zack<br>
Color: Black<br>
Avatar: Mastodon<br>
<br>
(etc)
回答by Joe
Here's an example using XMLHttpRequest:
这是使用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: <br>Color: <br>Avatar: <br>')} ).join('<br/>'));
Array.mapneeds to be shim in IE8 and below. Also, IE uses new ActiveXObject("Msxml2.XMLHTTP")This is a very slimmed down example. I'm using asyc false which is bad and document.write which is bad. But I just wanted to demonstrate getting the file and parsing the input.
Array.map需要在 IE8 及以下版本中填充。此外，IE 使用new ActiveXObject("Msxml2.XMLHTTP")这是一个非常精简的示例。我使用的是不好的 asyc false 和不好的 document.write 。但我只是想演示如何获取文件并解析输入。
回答by Chris Baker
ONLY APPLIES IF THE FILE IS NOT ALREADY ON THE SERVER(not specified in question)
仅当文件不在服务器上时才适用（未在问题中指定）
Without posting the file to the server or pasting the file's contents into a textbox, there is currently no way for javascript to interact directly with the file system.
如果不将文件发布到服务器或将文件内容粘贴到文本框中，JavaScript 目前无法直接与文件系统交互。
Also for security reasons, javascript may not, by itself, look at the contents of a file that has been selected using a file-type input.
同样出于安全原因，javascript 本身可能不会查看使用文件类型输入选择的文件的内容。
So, your options are:
所以，你的选择是：
- Upload the file to the server using AJAX-style form post, return the contents (jQuery plugin for AJAX file uploads)
- Submit the file via normal form postback, when the page is reloaded you can pass the contents along to javascript with JSON written to the output
- Copy/paste the data into a textarea, use an onKeyUp event to detect entry of data (or add a "Process" button) to read the textarea contents and go from there (sample)
- 使用 AJAX 样式的表单发布将文件上传到服务器，返回内容（用于 AJAX 文件上传的 jQuery 插件）
- 通过正常形式的回发提交文件，当页面重新加载时，您可以将内容传递给 javascript，并将 JSON 写入输出
- 将数据复制/粘贴到 textarea 中，使用 onKeyUp 事件检测数据输入（或添加“处理”按钮）以读取 textarea 内容并从那里开始（示例）
回答by jbabey
There is no file I/O in javascript for security reasons. Your best bet is to expose this text file in your server code and make an ajax call for it from the javascript
出于安全原因，javascript 中没有文件 I/O。你最好的办法是在你的服务器代码中公开这个文本文件，并从 javascript 中调用它
回答by Dave.Sol
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/>" );
}
