將檔案資料讀取到 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 的瀏覽器中測試


全站熱搜

changyy 發表在 痞客邦 留言(0) 人氣()