2013年2月7日 星期四

HTML5 File API 讀取檔案的觸發事件(event)

FileReader的觸發事件：

http://www.w3.org/TR/FileAPI/#events
http://www.w3.org/TR/FileAPI/#event-handler-attributes-section
共有6種事件如下

event handler attribute event handler event type 處發時機
onloadstart loadstart When the read starts
開始讀取
onprogress progress While reading (and decoding) blob, and reporting partial Blob data (progess.loaded/progress.total)
讀取並回報部份資料中
onabort abort When the read has been aborted. For instance, by invoking the abort() method.
中止讀取，使用abort()時
onerror error When the read has failed.
讀取失敗
onload load When the read has successfully completed.
讀取成功
onloadend loadend When the request has completed (either in success or failure)
request結束的時候(不管結果是成功或失敗均會觸發)


FileReader的狀態常數：

http://www.w3.org/TR/FileAPI/#dfn-readyState
readyState屬性是目前檔案讀取的狀態，有下列幾種值
  • EMPTY (0)：FileReader物件初建立。
  • LOADING (1)：讀取中。
  • DONE (2)：讀取結束(成功、失敗、中止...)


FileReader progess事件的進度資料：

http://www.w3.org/TR/progress-events/
要知道檔案讀取的進度，可使用progess事件提供的以下屬性
  • lengthComputable：檔案大小是否可知，true或false
  • loaded：已讀取的大小
  • total：檔案大小


範例：

以下範例，當選擇檔案後，會立即讀取檔案，觸發相關事件，若要觸發abort事件，可選擇較大的檔案，在尚未讀取完成時，按下「中止(abort)」按鈕，即會觸發abort事件。
(執行的流程，使用console.log輸出相關訊息，須開啟console查看。)
<!DOCTYPE html>
<html>
<head>
<script>
var fr;
function aa() {
    var file = document.getElementById('ff').files[0];
    //console.dir(file);
    if (file) {
        var msg = [];
        msg.push('檔名：' + file.name
             , '大小：' + file.size
             , '檔案類型：' + file.type
             , '修改日期：' + file.lastModifiedDate.toLocaleDateString()
            );
        document.getElementById('msg').innerHTML = msg.join("<"+"br"+">");
          
        //讀取檔案
        fr = new FileReader();
        console.log('readyState：'+fr.readyState);
        fr.onloadstart = function(){
            console.log('開始讀取：onloadstart');
            console.log('readyState：'+fr.readyState);
        }
        fr.onprogress = function(evt){
            console.log('讀取中：onprogress');
            if(evt.lengthComputable){
                console.log('進度：' + Math.round((evt.loaded/evt.total)*100) + "%");
            }
            console.log('readyState：'+fr.readyState);
        }
        fr.onabort = function(){
            console.log('讀取中止：onabort');//執行abort()時
            console.log('readyState：'+fr.readyState);
        }
        fr.onload = function(evt){
            console.log('讀取成功：onload');
            console.log('readyState：'+fr.readyState);
        };
        fr.onerror = function(evt){
            console.log('讀取失敗：onerror');
            console.log('readyState：'+fr.readyState);
        };
        fr.onloadend = function(){
            console.log('讀取結束(不管讀取成功或失敗)：loadend');
            console.log('readyState：'+fr.readyState);
        }
        fr.readAsDataURL(file);
        console.log('readyState：'+fr.readyState);
    }
}
 
function my_abort(){
    fr.abort();
}
</script>
</head>
<body>
<input type=file id="ff" onchange="aa()"/>
<input type="button" onclick="my_abort()" value="中止(abort)">
<div id="msg"></div>
</body>
</html>

備註：
相關連結：
HTML5 File API 讀取檔案內容
Posted by at
Labels:

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)