主頁 > 知識(shí)庫 > HTML5來實(shí)現(xiàn)本地文件讀取和寫入的實(shí)現(xiàn)方法

HTML5來實(shí)現(xiàn)本地文件讀取和寫入的實(shí)現(xiàn)方法

熱門標(biāo)簽:智能語音電銷機(jī)器人客戶端 江西ai電銷機(jī)器人如何 威海語音外呼系統(tǒng)平臺(tái) 通遼地圖標(biāo)注app 中國(guó)地圖標(biāo)注城市的 西安金倫外呼系統(tǒng) 地圖標(biāo)注員工作內(nèi)容 高德地圖標(biāo)注廁所 地圖標(biāo)注沿海城市房?jī)r(jià)

最近有這樣一個(gè)需求,就是在html頁面中有個(gè)按鈕導(dǎo)出,點(diǎn)擊它,將構(gòu)造一個(gè)文檔并存儲(chǔ)到本地文件系統(tǒng)中。另外還有個(gè)按鈕,點(diǎn)擊它,從本地文件系統(tǒng)中讀取一個(gè)文件并對(duì)內(nèi)容進(jìn)行分析。

說白了,就是一件事,就是如何讀取或?qū)懭氡镜匚募到y(tǒng)中的文件。

這件事情在html5以前是一件非??植赖?,因?yàn)闉g覽器對(duì)本地文件系統(tǒng)有非常強(qiáng)的保護(hù),似乎是一種叫做沙盒的機(jī)制,總之是,js不可以直接操作它。所以,這個(gè)時(shí)候,要想讀某個(gè)文件,就需要將文件上傳到服務(wù)器,然后服務(wù)器讀取并解析這個(gè)文件,并將解析結(jié)果返回客戶端。寫一個(gè)文件,就稍微簡(jiǎn)單些,js沒辦法寫,所以只能是服務(wù)器動(dòng)態(tài)生成一個(gè)文件,并以下載的方式來下載它(attachment)。但是這樣其實(shí)是很不合理的。因?yàn)橐僮鬟@個(gè)文件的是js引擎,但是中間還需要通過一個(gè)服務(wù)器。

html5來了它提供了一套文件系統(tǒng)的API,可以實(shí)現(xiàn)文件讀寫,我很好奇,這個(gè)需求可能是很常見的,但是網(wǎng)上卻很少有Demo.所以,自己整理了一下。

文件讀取

文件讀取要利用到的API是FileReader,在html中的元素為:

<div>
    <input type="file" id="files" style="display:none" onchange="import();"/>
    <input type="button" id="import" value="導(dǎo)入"/>
</div>

 html中元素就這么簡(jiǎn)單,首先需要一個(gè)file類型的input元素,這里為啥要display:none呢?因?yàn)檫@個(gè)東西太丑了

js代碼:

$("#import").click(function(){//點(diǎn)擊導(dǎo)入按鈕,使files觸發(fā)點(diǎn)擊事件,然后完成讀取文件的操作。
        $("#files").click();
    });
 
function import(){
    var selectedFile = document.getElementById("files").files[0];//獲取讀取的File對(duì)象
    var name = selectedFile.name;//讀取選中文件的文件名
    var size = selectedFile.size;//讀取選中文件的大小
    console.log("文件名:"+name+"大?。?quot;+size);
 
    var reader = new FileReader();//這里是核心!?。∽x取操作就是由它完成的。
    reader.readAsText(selectedFile);//讀取文件的內(nèi)容
 
    reader.onload = function(){
        console.log(this.result);//當(dāng)讀取完成之后會(huì)回調(diào)這個(gè)函數(shù),然后此時(shí)文件的內(nèi)容存儲(chǔ)到了result中。直接操作即可。
    };
}

這樣,讀取本地文件的操作就完成了。有些網(wǎng)友說什么使用ActiveXObject的什么的,這個(gè)只有在IE中才能使用,但是現(xiàn)在連微軟都放棄了IE,所以,不要這樣使用。

寫入文件

寫入文件稍微復(fù)雜了一些,雖然在html5中與FileReader相對(duì)應(yīng)的也有一個(gè)FileWriter,但是這個(gè)東西用起來實(shí)在是不爽,至少我查了大半天,沒有找到一個(gè)可以用的API,此外,F(xiàn)ileReader可以被Chrome、FF和Safari都支持。當(dāng)然了,要求一定版本以上的。 但是FileWriter似乎只有被Chrome支持。不管了,能用就好。

//首先導(dǎo)入一個(gè)js文件
<script type="text/JavaScript" src="./js/FileSaver.js" charset="utf-8"></script>
//html中添加一個(gè)導(dǎo)出元素 
<input type="button" id="export" value="導(dǎo)出"/>
//js文件
$("#export).click(function(){
    var content = "這是直接使用html5進(jìn)行導(dǎo)出的";
    var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
    saveAs(blob, "file.txt");//saveAs(blob,filename)
});

到此這篇關(guān)于HTML5來實(shí)現(xiàn)本地文件讀取和寫入的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)HTML5本地文件讀取寫入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!  

標(biāo)簽:眉山 營(yíng)口 晉中 北海 河池 阜陽 崇左 青海

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML5來實(shí)現(xiàn)本地文件讀取和寫入的實(shí)現(xiàn)方法》,本文關(guān)鍵詞  HTML5,來,實(shí)現(xiàn),本地,文件,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5來實(shí)現(xiàn)本地文件讀取和寫入的實(shí)現(xiàn)方法》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML5來實(shí)現(xiàn)本地文件讀取和寫入的實(shí)現(xiàn)方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章