Ocean 學習筆記: File API

2012年4月10日星期二

File API

File API 瀏覽器中一群用來處理檔案讀取。

W3C文件中File API中主要內容有：

File API Browser Support：

FileList

一個陣列用來存放File，File來源藉由<input type=“file”>操作選擇或是拖曳而來。
可由<input type=“file”>的屬性files取得或是拖曳事件的DataTransfer物件取得(e.dataTransfer）。
若想多檔選取在<input type=“file”> 加入multiple=“multiple“。

FileList Attributes

length ：回傳FileList的長度，沒有檔案返回0。

Blob

表示原始的二位元資料，且允許存取Blob內容。
具method可以切割資料內容。

Blob Attributes

size：回傳Blob的大小，byte為單位。
type：表示Blob的MIME類型[RFC2046]，未知類型返回空字串。

Blob Method

Slic(start , length , contentType)

Returns a new Blob object between the ranges of bytes specified.

Slic Parameter

Start：This is a value for the start point of a slice call.
Length：This is a value for the end point of a slice call as byte offsets from start.
contentType：This is optional, and can be used to set a value identical to one that is set with the HTTP/1.1 Content-Type header on the Blob returned by the slice call.

Slic會回傳一個依參數條件所裁切的Blob物件回來。
contentType是可選的。

File

File繼承了Blob。
File紀錄著一個文件的資訊，如檔案名稱、最後修改檔案日期等，但並不是實際的文件內容。

File Attributes

name ：文件的名稱，無法提供的話返回空字串。
lastModifiedDate ：文件最後修改日，返回一個Date物件，無法提供的話為null。

FileReader

提供method來讀取一個File或是一個Blob。
繼承了EventTarget ，這是DOM3 Event裡面定義的介面，有了他，才能提供addEventListener。

File Event

event handler attribute	event handler event type
`onloadstart`	`loadstart`
`onprogress`	`progress`
`onabort`	`abort`
`onerror`	`error`
`onload`	`load`
`onloadend`	`loadend`

FileReader.onloadstart // 讀取操作開始時觸發
FileReader.onprogress // 讀取操作過程中觸發
FileReader.onabort // 讀取操作被中斷時觸發
FileReader.onerror // 讀取操作失敗時觸發
FileReader.onload // 讀取操作成功時觸發
FileReader.onloadend // 讀取操作完成時觸發(不論成功還是失敗)

FileReader States

EMPTY (Value = 0)：No data has been loaded yet. (沒有資料被讀取進)。
LOADING (Value = 1)：Data is currently being loaded.(資料正在讀取中)。
DONE (Vlaue = 2)：The entire read request has been completed.(讀取完畢)。

FileReader Attributes

result：讀取的資料。
readyState(繼承而來)：目前FileReader的狀態。

FileReader Method

Method	Description
readAsArrayBuffer(Blob)
readAsText(Blob,encoding)	以文本(及字符串)格式讀取文件內容，並且可以強制選擇文件編碼，encoding預設為utf-8。
readAsDataURL(Blob)	以DataURL格式讀取文件內容。
readAsBinaryString(Blob)	將文件讀取為二進製字符串，通常我們將它傳送到後端，後端可以通過這段字符串存儲文件。
abort()	停止讀取

FileReader Browser Support：

Code example：

<!DOCTYPE HTML>

<html>

<head> 

<title>File Reader Test</title>

<style>

.thumb {

height: 75px;

border: 1px solid #000;

margin: 10px 5px 0 0;

}

</style>

<meta charset="UTF-8"/> 

<script src="lib/jquery-1.7.1.min.js"></script>

<script>  

function checkSuport()

{

//檢查支援

if(typeof File === 'undefined'){

alert("瀏覽器不支援File");

return;   

}



if(typeof FileReader === 'undefined'){

alert("瀏覽器不支援FileReader");

return;

} 

}  



function handleFileSelect(evt) 

{   

// FileList object   



var myFiles = evt.target.files; 



for(var i= 0 ; i < myFiles.length ; i++)

{

// Only process image files.

if (!myFiles[i].type.match('image.*')){

continue;

}

var s = "<li>" 

+"<span>" + "name:" + myFiles[i].name + "</span></br>"

+"<span>" + "size:" + myFiles[i].size + "bytes" + "</span></br>"

+"<span>" + "type:" + myFiles[i].type + "</span></br>"

+"</li>";       

$("#list").append(s);       



var reader = new FileReader();

// Closure to capture the file information.

reader.onload = 

(

function(theFile) 

{

return function(e) 

{

// Render thumbnail.

var span = document.createElement('span');

span.innerHTML = ['<img class="thumb" src="', e.target.result,

'" title="', escape(theFile.name), '"/>'].join('');

//document.getElementById('imageList').insertBefore(span, null);

$("#imageList").append(span);

};

}

)(myFiles[i]);



// Read in the image file as a data URL.

reader.readAsDataURL(myFiles[i]);    



}

}



function mainStart()

{   

checkSuport();

//偵聽開啟檔案事件   

$("#fileSelector").change(handleFileSelect);   

}  



$(document).ready(mainStart); 



</script>  

</head>



<body>

<div>

<input id="fileSelector" type="file" multiple="multiple" value=""/>   

</div>

<output id="imageList"></output>

<article>

<ul id="list"> 



</ul>

</article> 

</body> 

</html>