File API

File APIとはHTML5で実装された、ローカル ファイルを操作するためのAPIです。

File

ファイルに関する情報を取得できます。File - Web APIs | MDN

FileReader

FileまたはBlobオブジェクトで示された、ファイルの内容を読み込めます。FileReader - Web APIs | MDN

メソッド  
readAsArrayBuffer  
readAsBinaryString  
readAsDataURL  
readAsText   
readAsArrayBuffer(blob);
readAsBinaryString(blob);
readAsDataURL(blob);

readAsText

readAsText(blob[, encoding]);
FileReader.readAsText() - Web APIs | MDN

encodingは、5.2 Names and labels - Encoding Standardにある形式で指定します。

サンプルコード

選択された画像のサムネイル表示

<input type="file" id="sample" accept="image/*" />
var file = document.getElementById( 'sample' );
file.onchange = function()
{
    for( var i = 0; i < this.files.length; i++ )
    {
        var file = this.files[ i ];
        var imageType = /^image\//;

        if( file.type.match( imageType ) )
        {
            var img = document.createElement( 'img' );
            img.file = file;

            document.body.appendChild( img );

            var reader = new FileReader();
            reader.onload = ( function( aImg )
                {
                    return function( e )
                    {
                        aImg.src = e.target.result;
                    };
                } )( img );

            reader.readAsDataURL( file );
        }
    }
}
例: ユーザが選択した画像のサムネイルを表示 - Mozilla Developer Network

参考

関連ページ

JavaScriptのドキュメントから検索