声明
最近春招如火如荼伏热进行着，不管大牛还是小白，在接受电面的时候难免心里不踏实，迫切需要一个读取链接的程序来拯救。
目的：读取文件内容，将文件里的链接读取出来，并在浏览器内打开新的窗口。
读取文件
JavaScript并没有专门的API来读取文件内容，HTML中input[type="file"]可以获取文件，但想要获取文件内容就比较困难了。楼主也是困扰了很久了。
事实上，如果使用Ajax的话很多东西就变得简单了，但楼主的目的并不想经过后台的加工，如果可以直接使用浏览器读取出来文件内容（也就是说文件链接为file://）那就完美了。如实楼主试着去查找了下浏览器有没有这方面的API。功夫不负有心人，楼主在CSDN上的一片博客里找到了相关的API，也就是HTML5的一个新的接口——filereader。有兴趣的读者可以去这个链接看看,这里面有HTML5最新的接口。
附上读取文件的代码：
<script type="text/javascript">
var result=document.getElementById("result");
var file=document.getElementById("file");
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";
//使选择控件不可操作
file.setAttribute("disabled","disabled");
}
function readAsDataURL(){
//检验是否为图像文件
var file = document.getElementById("file").files[0];
if(!/image/w+/.test(file.type)){
alert("看清楚，这个需要图片！");
return false;
}
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e){
var result=document.getElementById("result");
//显示文件
result.innerHTML='<img src="' + this.result +'" alt="" />';
}
}
function readAsBinaryString(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以二进制形式读入页面
reader.readAsBinaryString(file);
reader.onload=function(f){
var result=document.getElementById("result");
//显示文件
result.innerHTML=this.result;
}
}
function readAsText(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以文本形式读入页面
reader.readAsText(file);
reader.onload=function(f){
var result=document.getElementById("result");
//显示文件
result.innerHTML=this.result;
}
}
</script>
<p>
<label>请选择一个文件：</label>
<input type="file" id="file" />
<input type="button" value="读取图像" onclick="readAsDataURL()" />
<input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
<input type="button" value="读取文本文件" onclick="readAsText()" />
</p>
<div id="result" name="result"></div>
我们这里只需要使用readAsText（）函数就够了。
解析文件内容
我们知道AJAX读取文件的内容可能会是XML和Json,但都逃脱不了字符串的本质，这里我们读取出来的内容就是一段字符串。接下来就是利用正则将我们需要的信息（URL）提取出来，正则代码：
/[a-z]+://[a-z,0-9]+[.a-z,0-9]+[/a-z,0-9,?,-,=,\_,A-Z]+[.a-z]+/g;
返回的字符串我们只需要利用Window的open方法在浏览器打开新的窗口就OK了。
读取文件的信息
我们知道的是HTML中的input[type="file"]可以读取文件的名称，但不足的是我们无法通过CSS改变它的格式。依照模拟弹出框，模拟提示框的思路，楼主想到了通过获取文件信息，然后给input元素加一个label的方式来模拟读取文件。
之后就是一个简单的样式设置了。
附上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>读取文件处理</title>
<style>
.container{
280px;
height:470px;
position: relative;
left:-160px;
margin-left:50%;
background: url(bg.jpg);
background-size: cover;
border-radius: 5px;
border:1px solid #D0EEFF;
box-shadow: 1px 4px 4px 1px #8B8B8B;
padding-left:20px;
padding-right:20px;
}
.file {
display: inline-block;
background: #D0EEFF;
border:1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color:#1E88C7;
line-height: 30px;
font-size: 1.5em;
margin-top:10px;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
}
#openLink,#get{
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color:#1E88C7;
line-height: 20px;
}
input[type="file"]{
display: none;
}
#name,#size,#type{
color:blue;
font-family: "楷体";
font-weight: bold;
}
.intro{
color:white;
font-family: "楷体","宋体","微软雅黑";
}
header{
text-align: center;
font-size: 1.5em;
color: #000;
}
footer{
text-align: center;
color: #000;
}
</style>
</head>
<body>
<div class="container">
<header>
文件链接读取程序
</header>
<label class="file" for="file">选择文件</label>
<input type="file" accept="" class="file" id="file" />
<div id="content">
<p id="name">文件名称：</p>
<p id="size">文件大小：</p>
<p id="type">文件类型：</p>
</div>
<button id="openLink">打开所有链接</button>
<button id="get">获取文件信息</button>
<div class="intro">
<h4>使用说明：</h4>
<p>
1.将链接保存在文件(请注意文件类型txt）点击"选择文件"导入，点击"打开所有链接"即可；
</p>
<p>
3.若浏览器阻止弹出窗口，点击“允许弹出”即可；
</p>
</div>
<footer>Create by 秦至</footer>
</div>
</body>
<script type="text/javascript">
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
alert("你的浏览器不支持读取文件功能哦！");
//使选择控件不可操作
file.setAttribute("disabled","disabled");
}
document.getElementById("openLink").onclick=function(){
var result=document.getElementById("result");
var file=document.getElementById("file");
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以文本形式读入页面
reader.readAsText(file);
reader.onload=function(){
var result=document.getElementById("result");
//显示文件
var str=this.result;
var pattern=/[a-z]+://[a-z,0-9]+[.a-z,0-9]+[/a-z,0-9,?,-,=,\_,A-Z]+[.a-z]+/g;
var arr=str.match(pattern);
var txt="";
for(var i=0; i<arr.length;i++){
window.open(arr[i]);
}
}
}
document.getElementById("get").onclick=function(){
var file=document.getElementById("file").files;
var name=document.getElementById("name");
name.innerHTML="文件名称："+file[0].name;
size.innerHTML="文件大小："+file[0].size+"字节";
type.innerHTML="文件类型："+file[0].type;
}
</script>
</html>
为使用方便，楼主将CSS，HTML，JavaScript写在了一个文件里。