今天我們示範使用HTML5 File API來讀取檔案內容。雖然市面上有很多好用且功能又強大的File Uploader ，但是骨子裡還是用HTML5 File API，所以不妨多去了解一些HTML5的東西對於前端開發絕對是有益處的。
File API的幾個重要的核心類別 :
Blob(Binary Large Object): 表示二進制資料，此外還可以設定MIME類型。
File: 表示檔案且繼承於Blob，但與Blob不同的是它增加name、lastModified、lastModifiedDate、webkitRelativePath等屬性。
FileList: 表示 files的集合。
FileReader: 以非同步的方式讀取檔案內容，以下幾種方法與事件 :
File: 表示檔案且繼承於Blob，但與Blob不同的是它增加name、lastModified、lastModifiedDate、webkitRelativePath等屬性。
FileList: 表示 files的集合。
FileReader: 以非同步的方式讀取檔案內容，以下幾種方法與事件 :
1. readAsArrayBuffer：讀取檔案後，並回傳 ArrayBuffer 物件。
2. readAsBinaryString：讀取檔案後，並回傳 Binary String 。(非標準，建議不要使用)
3. readAsDataURL：讀取檔案後，並回傳 DataURI 。
4. readAsText：讀取檔案後，並傳回文字內容(預設UTF-8)。
5. onload : 讀取完檔案後，所執行的事件。
6. abort：取消讀取。
※Data URI 是一種文字型態的檔案格式，其格式為"data:<mime type>;base64,<data>"， 範例:"data:image/png;base64,PCFET0NUWVB..." ，而Data URI 的好處就是它可以直接寫入 HTML，且img元素可以接受Data URI格式。
※若要以同步的方式讀取檔案請使用FileReaderSync
6. abort：取消讀取。
※Data URI 是一種文字型態的檔案格式，其格式為"data:<mime type>;base64,<data>"， 範例:"data:image/png;base64,PCFET0NUWVB..." ，而Data URI 的好處就是它可以直接寫入 HTML，且img元素可以接受Data URI格式。
※若要以同步的方式讀取檔案請使用FileReaderSync
File API 程式碼範例如下所示:
1. 首先，在Input註冊Chang事件以便取得File。
2. 建立FileReader物件，並且註冊onload事件用於接收回傳的DataURL。
3. 執行readAsDataURL來讀取File，讀取完檔案後會觸發onload事件。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>File API</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<h1>File Reader</h1>
<div>
Select a file:
<input type="file" id="input" />
</div>
<p id="output"></p>
</div>
<script>
$(function () {
var input = $('#input');
var output = $('#output');
input.change(function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function () {
output.html(reader.result);
};
reader.readAsDataURL(file);
});
});
</script>
</body>
</html>
留言
張貼留言