[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 的瀏覽器中測試