HTML5中如何對本地文件進行讀取和寫入

今天小編給大家分享一下HTML5中如何對本地文件進行讀取和寫入的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

最近有這樣一個需求，就是在html頁面中有個按鈕導出，點擊它，將構造一個文檔并存儲到本地文件系統中。另外還有個按鈕，點擊它，從本地文件系統中讀取一個文件并對內容進行分析。

說白了，就是一件事，就是如何讀取或寫入本地文件系統中的文件。

這件事情在html5以前是一件非常恐怖的，因為瀏覽器對本地文件系統有非常強的保護，似乎是一種叫做沙盒的機制，總之是，js不可以直接操作它。所以，這個時候，要想讀某個文件，就需要將文件上傳到服務器，然后服務器讀取并解析這個文件，并將解析結果返回客戶端。寫一個文件，就稍微簡單些，js沒辦法寫，所以只能是服務器動態生成一個文件，并以下載的方式來下載它（attachment）。但是這樣其實是很不合理的。因為要操作這個文件的是js引擎，但是中間還需要通過一個服務器。

html5來了它提供了一套文件系統的API，可以實現文件讀寫，我很好奇，這個需求可能是很常見的，但是網上卻很少有Demo.所以，自己整理了一下。

文件讀取

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

<div>
    <input type="file" id="files"  onchange="import();"/>
    <input type="button" id="import" value="導入"/>
</div>

 html中元素就這么簡單，首先需要一個file類型的input元素，這里為啥要display:none呢？因為這個東西太丑了

js代碼：

$("#import").click(function(){//點擊導入按鈕，使files觸發點擊事件，然后完成讀取文件的操作。
        $("#files").click();
    });
 
function import(){
    var selectedFile = document.getElementById("files").files[0];//獲取讀取的File對象
    var name = selectedFile.name;//讀取選中文件的文件名
    var size = selectedFile.size;//讀取選中文件的大小
    console.log("文件名:"+name+"大小："+size);
 
    var reader = new FileReader();//這里是核心！！！讀取操作就是由它完成的。
    reader.readAsText(selectedFile);//讀取文件的內容
 
    reader.onload = function(){
        console.log(this.result);//當讀取完成之后會回調這個函數，然后此時文件的內容存儲到了result中。直接操作即可。
    };
}

這樣，讀取本地文件的操作就完成了。有些網友說什么使用ActiveXObject的什么的，這個只有在IE中才能使用，但是現在連微軟都放棄了IE，所以，不要這樣使用。

寫入文件

寫入文件稍微復雜了一些，雖然在html5中與FileReader相對應的也有一個FileWriter，但是這個東西用起來實在是不爽，至少我查了大半天，沒有找到一個可以用的API，此外，FileReader可以被Chrome、FF和Safari都支持。當然了，要求一定版本以上的。 但是FileWriter似乎只有被Chrome支持。不管了，能用就好。

//首先導入一個js文件
<script type="text/JavaScript" src="./js/FileSaver.js" charset="utf-8"></script>

//html中添加一個導出元素 
<input type="button" id="export" value="導出"/>

//js文件
$("#export).click(function(){
    var content = "這是直接使用html5進行導出的";
    var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
    saveAs(blob, "file.txt");//saveAs(blob,filename)
});

以上就是“HTML5中如何對本地文件進行讀取和寫入”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。