2010年8月2日 星期一

[Javascript] 讀取 Binary 資料存入變數中

將檔案資料讀取到 Javascript 變數中,大概可以分成兩個方向,一種是將遠端的檔案透過 URL 讀取進來,另一種則是從本地端透過使用者選取的檔案讀取進來。在此後者使用 HTML5 的 File API 進行處理。


先提一下遠端檔案, Ajax query 雖然已經很常見了,但對於要將讀取的資料以 binary 姿態儲存在變數之中,還是需要額外處理:


var raw_data = null;


var path = "test_file.zip";
var ajReq = new XMLHttpRequest();

try
{
        ajReq.open( 'GET' , path , false );
        ajReq.overrideMimeType( 'text/plain; charset=x-user-defined' );
        ajReq.send(null);

        var out = ajReq.responseText || '' ;

        var out_array = [];

        for( var i=0, len=out.length, scc=String.fromCharCode ; i<len ; ++i )

                out_array[i] = scc( out.charCodeAt(i) & 0xff );

        raw_data = out_array.join( '' );

}
catch( err )
{
        alert( 'Error:' + err );
}


而從本地端讀取使用者所選取的檔案,則使用 HTML5 - File API , FileReader


function getRawData( raw_data )
{

}

var reader = new FileReader();
reader.onload = function(e){ getRawData( e.target.result ); };
if( document.getElementById('file').files[0] )
{
        reader.readAsBinaryString( document.getElementById('file').files[0] );
}


其中在 HTML 裡,有個 <input id="file" type="file" />,而 FileReader 似乎滿好玩的,還有 readAsDataURL 可以玩玩


此例可在 Firefox 3.6 或 Google Chrome 6 等支援 HTML5 的瀏覽器中測試


沒有留言:

張貼留言