文件链接读取程序

原创 2016年03月19日 19:54:20

声明

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

读取文件

    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{
            width: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写在了一个文件里。

版权声明:本文为博主原创文章,未经博主允许不得转载。

1.2.在linux环境实践,使用vim编写一个程序,然后使用gcc查看【预处理】、【编译】、【汇编】、【链接】各阶段文件的内容。并熟悉相关指令。

在linux环境下简单编写一个输入0-9的小程序,给大家演示一下linux下的【预处理】【编译】【汇编】【链接】 首先,在vim的编辑器下写一个简单的小程序,如下图: 然后使用预处理选项 ...

自己写的mysql客户端应用程序(通过官方头文件和lib来编译链接实现)

#include #include #include #include "include\mysql.h" //#pragma comment(lib, "libmysql.lib") ...

C++应用程序在Windows下的编译、链接:(二)COFF/PE文件结构

本文是对C++应用程序在Windows下的编译、链接的深入理解和分析,文章的目录如下:          我们先看第一章概述部分。 1概述 1.1编译工具简介 cl.ex...

EWARM IAR5.4编译链接过程, 程序运行阶段, ICF ilink配置文件

编译链接过程 编译器, 汇编器和链接器完成将代码转换成可执行文件的过程. 编译过程 首先是编译器和汇编器, 这是链接之前的工作, 生成可重定向的目标文件, 进而可以生成库文件: 命...

ELF文件格式与程序的编译链接

说明:本文的讨论基于一个运行linux的x86系统环境,使用标准ELF文件格式。讨论集中在32位代码,在x86-64系统上用gcc -m32产生32位代码。若编译时发生/usr/includ...

Ubuntu下程序的编译和链接过程和openCV的makefile文件

简述在windows下编程,可能一个F5就能让代码跑起来,那是因为IDE(比如VS2103等)已经帮你做好了后台的编译和链接过程。当在Ubuntu下让代码跑起来,就要自己去理解代码的编译和链接过程。 ...
  • CV_YOU
  • CV_YOU
  • 2017年04月20日 16:31
  • 1285

C++应用程序在Windows下的编译、链接:第二部分COFF/PE文件结构

2.1概述 在windows操作系统下,可执行文件的存储格式是PE格式;在Linux操作系统下,可执行文件的存储格式的WLF格式。它们都是COFF格式文件的变种,都是从COFF格式的文件演化而来...

C++应用程序在Windows下的编译、链接:第二部分COFF/PE文件结构

2.1概述 在windows操作系统下,可执行文件的存储格式是PE格式;在Linux操作系统下,可执行文件的存储格式的WLF格式。它们都是COFF格式文件的变种,都是从COFF格式的文件演化而来的。...

程序的编译链接关系及库文件编写

虽然学过编译原理,但其实我一直不是很清楚一个程序生成可执行文件的过程,记得以前有老师讲过,用一下UNUX就会很清楚整个过程的了。确实,看Makefile文件时就发现,原来在这文件里是写得很详细的。虽然...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:文件链接读取程序
举报原因:
原因补充:

(最多只允许输入30个字)