声明
最近春招如火如荼伏热进行着,不管大牛还是小白,在接受电面的时候难免心里不踏实,迫切需要一个读取链接的程序来拯救。
目的:读取文件内容,将文件里的链接读取出来,并在浏览器内打开新的窗口。
读取文件
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;
}
}
</