DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 文件鏈接讀取程序
文件鏈接讀取程序
編輯：JavaScript基礎知識     

聲明

最近春招如火如荼伏熱進行著，不管大牛還是小白，在接受電面的時候難免心裡不踏實，迫切需要一個讀取鏈接的程序來拯救。
目的：讀取文件內容，將文件裡的鏈接讀取出來，並在浏覽器內打開新的窗口。

讀取文件

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寫在了一個文件裡。

聲明

最近春招如火如荼伏熱進行著，不管大牛還是小白，在接受電面的時候難免心裡不踏實，迫切需要一個讀取鏈接的程序來拯救。
目的：讀取文件內容，將文件裡的鏈接讀取出來，並在浏覽器內打開新的窗口。

讀取文件

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寫在了一個文件裡。

JavaScript基礎知識
舉例講解如何判斷JavaScript中對象的類型
在編寫js程序的過程中，可能常常需要判斷一個對象的類型，例如你寫了一個函數，需要通過判斷不同的參數類
javascript之面向對象學習筆記02
Object 原型中的常用方法1、constructor語法：構造函數.prototype.cons
JavaScript italics方法入門實例（把字符串顯示為斜體）
JavaScript italics 方法italics 方法返回使用 HTML i 標簽屬性定義的

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
javascript的幾種寫法總結 Three.js源碼閱讀筆記(物體是如何組織的) javascript scrollTop正解使用方法 你必須知道的JavaScript 變量命名規則詳解 javascript對象的使用和屬性操作示例詳解 詳解JavaScript的策略模式編程 JavaScript中幾種排序算法的簡單實現 window.location.href的用法(動態輸出跳轉) javascript replace()第二個參數為函數時的參數用法 scrollTop 用法說明
熱門推薦
12.1 文檔對象簡介 舉例講解如何判斷JavaScript中對象的類型 javascript學習筆記(十六) 系統對話框(alert、confirm、prompt) 詳解Javascript函數聲明與遞歸調用 JavaScipt基本教程之JavaScript語言的基礎 在JavaScript並非所有的一切都是對象 Javascript中的數學函數集合 JS的事件監聽機制詳解 JavaScript DOM 學習第九章 選取范圍的介紹
大家都在看
Web前台開發工程師如何定位自己 HTML4和HTML5之間除了相似以外的10個主要不同 XUL 教程 引言 jquery獲取元素的標簽名(tagName) css的效率和浏覽器渲染的速度 根據W3C的CSS3草案翻譯的CSS3參考手冊 字體設計探討:廣告banner字體設計技巧 Javascript基礎教程之while語句
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved