回転:FileReaderの詳細とインスタンス---画像ファイルを読み取り、表示

~~~ローカル画像を読み取り、ブラウザにすぐに表示する必要がある場合、chrome firefoxはセキュリティ上の制限があるため、input fileはファイルの真のパスを返さず、テストされたIE 6/7/8はいずれも真のパスを返すので、chrome、firefoxは直接画像をページに表示することができません.ここではちょうどFileReaderという東東を使うことができます
『HTML 5におけるFileオブジェクトの初探査』でFileReaderを使用したことがあります.この文書では、ファイルをバイナリ文字列として読み取り、xhrを介してバックエンドに送信してインタラクションを形成するために使用されています.File APIの一部として、FileReaderはファイルの読み取りに特化しており、W 3 Cの定義に従って、FileReaderインタフェースは「ファイルの読み取り方法と読み取り結果を含むイベントモデルを提供する」.
 
次に、FileReaderの方法とイベントモデルを逐一理解し、最終的には、FileReaderを適用するインスタンスプログラムを使用します.この例では、FileReaderブラウザをサポートするユーザーを使用して、file inputを使用して画像ファイルを選択し、バックグラウンドを介さずに画像をページに表示することができます.次のリンクはこの例を指していますが、これまでFirefox 3.6+とChrome 6.0+だけがFileReaderインタフェースを実現していたことに注目してください.~~~新しいchrome firefoxはFileReaderインタフェースを実現しました
 
これまでのウェブアプリケーションでは、ユーザが選択した画像ファイルをバックエンドに転送し、バックエンドに格納してURLをフロントエンドに戻し、フロントエンドにこのURLで画像を表示するのが一般的でした.FileReaderの突破点は、JavaScriptがファイルを処理する能力を持つことであり、ユーザーのパソコンに格納されているファイルを非同期で読み取ることができることである.ここでいうファイルは、JavaScriptにとってFileオブジェクトであり、FileReaderがファイルを読み取るすべての方法はこれに依存している.Fileオブジェクトについてまだよく知らない場合は、『HTML 5におけるFileオブジェクトの初探査』を先に読んでください.これは本稿の基礎である.
1.コンピテンシーの検出とインスタンスの作成
ブラウザがFileReaderをサポートしているかどうかを検出するのは簡単です.このインタフェースをサポートするブラウザにはwindowオブジェクトの下にあるFileReaderコンストラクション関数があります.ブラウザにこのコンストラクション関数があれば、FileReaderのインスタンスをnewして使用できます.

        if ( typeof FileReader === 'undefined' ) {

	        alert( "          FileReader    " );

	} else {

                var reader = new FileReader();

	        // do sth.

	}

2.方法
FileReaderの例には4つの方法があり、そのうち3つはファイルを読み取るために使用され、もう1つは読み取りを中断するために使用される.次の表には、これらのメソッドとパラメータと機能がリストされています.読み取りに成功しても失敗しても、メソッドは読み取り結果を返さず、resultプロパティに格納されます.
メソッド名
パラメータ
説明
abort
none
わりこみよみとり
readAsBinaryString
file
ファイルをバイナリコードとして読み込む
readAsDataURL
file
データURLとしてファイルを読み込む
readAsText
file, [encoding]
ファイルをテキストとして読み込む
readAsText:この方法には2つのパラメータがあり、2番目のパラメータはテキストの符号化方式であり、デフォルト値はUTF-8である.この方法は非常に理解しやすく、ファイルをテキストで読み取り、読み取りの結果、このテキストファイルの内容になります.readAsBinaryString:この方法は『HTML 5におけるFileオブジェクトの初探査』で1回使用されています.ファイルはバイナリ文字列として読み込まれます.通常、バックエンドに転送されます.バックエンドはこの文字列でファイルを格納できます.readAsData URL:これは例のプログラムで用いられる方法で、この方法はファイルをdata:で始まる文字列に読み取る.この文字列の実質はData URIであり、Data URIは小さなファイルを直接ドキュメントに埋め込むスキームである.ここでの小さなファイルとは、通常、画像やhtmlなどのフォーマットのファイルを指します.ここをクリックしてData URIの詳細について .
3.イベント
FileReaderには、ファイルを読み込むときの状態をキャプチャするための完全なイベントモデルが含まれています.次の表では、これらのイベントをまとめています.
≪イベント｜Events｜ldap≫
説明
onabort
割り込み時にトリガー
onerror
エラー時にトリガー
onload
ファイル読み込みが正常に完了するとトリガーされます
onloadend
読み込み完了トリガ(成功または失敗にかかわらず)
onloadstart
読み込み開始時にトリガー
onprogress
読み込み中
ファイルの読み込みが開始されると、成功または失敗にかかわらず、インスタンスのresultプロパティが埋め込まれます.読み取りに失敗するとresultの値はnullになり、そうでないと読み取りの結果となり、ほとんどのプログラムがファイルの読み取りに成功したときにこの値をキャプチャします.

	reader.onload = function () {

		this.result     //     

	}

4.インスタンス
これらの知識を理解した後、前の例を復元します.最初のステップでは、htmlセクションを作成します.主にinputと結果を表示するためのdivが含まれます.

    <p>

        <label>         ：</label>

        <input type="file" id="demo_input" />

    </p> 

    <div id="demo_result">

          <!--            -->

    </div> 

次にノードを取得し、ブラウザ互換性セクションを処理します.FileReaderインタフェースが実装されていないブラウザでは、inputを無効にするプロンプトが表示されます.そうしないと、inputのchangeイベントが傍受されます.

if ( typeof FileReader === 'undefined' ){

        result.innerHTML = "<p class='warn'>  ，         FileReader</p>";

        input.setAttribute( 'disabled','disabled' );

} else {

        input.addEventListener( 'change',readFile,false );

}

最後に関数readFileのコードを書き、file inputのchangeイベントがトリガーされると、この関数を呼び出し、まずfileオブジェクトを取得し、fileのtype属性でファイルタイプを検証します.ここでは、画像タイプのファイルのみを選択できます.次にFileReaderインスタンスを作成し、readAsDataURLメソッドを呼び出してファイルを読み込み、インスタンスのloadイベントで正常に読み込まれたファイルの内容を取得し、imgノードを挿入するようにページに表示します.

function readFile(){

        var file = this.files[0];  //~~~ file         type      mime

        if(!/image\/\w+/.test(file.type)){

                alert("          ");

                return false;

        }

        var reader = new FileReader();

        reader.readAsDataURL(file);  //~~~readAsDataURL

        reader.onload = function(e){

                result.innerHTML = '<img src="'+this.result+'" alt=""/>' //~~   reader.result   src  ，reader.result DataURL

        }

}

ローカルピクチャの読み込みと表示:

var himgCH; //   320        

    $(function(){

        var supportFileReader;

        try{ if( (typeof FileReader) =='function') supportFileReader = true;}catch(e){ supportFileReader=false; }

        var isie = navigator.userAgent.toLowerCase().indexOf('msie')>=0;

        $('#himgfile').change(function(){ 

            if(navigator.userAgent.toLowerCase().indexOf('msie')<0 || supportFileReader ){ //(!ie or ie10) chrome , firefox

                var file = this.files[0]; //       

                if(! /image\/\w+/.test(file.type) ){ //file.type    mime 

                    alert("       ");

                }else{

                    

                        var reader = new FileReader();

                        reader.readAsDataURL(file);//       readAsDataURL

                        reader.onload = function(){

                            // $('#pic4up').attr('src',this.result);

                            $('#p_up').attr('src', this.result);

                            $('#p_prev').attr('src', this.result);

                            var img = new Image();

                            img.src = this.result; 

                            setTimeout(function(){ //      img          

                                // console.log(img.width);

                                $('#scale').val( img.width/320 );



                                himgCH = $('#p_up').height(); 

                                $('#p_up').height(himgCH);

                                $('#p_up').imgAreaSelect({aspectRatio:'1:1', onSelectChange: preview});

                            },100 );

                            

                        }

                }

            }else{ //ie 6 7 8

                //alert('using ie8- , file value:' + this.value);

                // $('#pic4up')[0].src=this.value;

                this.select(); 

                // $('#pic4up')[0].src = document.selection.createRange().text; 

                var img = new Image(); //alert('choose file path:' + document.selection.createRange().text );

                var fpath = document.selection.createRange().text; //        

                // $('#p_prev')[0].src = img.src = $('#p_up')[0].src =  fpath; //          img.src     



                //AlphaImageLoader        ： AlpahaImageLoader src=                      AlphaImageLoader                 

                img.src = fpath; //         

                $('#p_prev,#p_up').each(function(i, ele, eles){

                    this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";

                    this.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fpath;

                    if(this.id == 'p_prev') this.src = 'images/blank320_320.gif';

                });



                setTimeout(function(){ //      img          

                    // alert(img.width);

                    $('#scale').val(img.width/320);

                    himgCH = $('#p_up').height(); 

                    $('#p_up').height(himgCH);

                    $('#p_up').imgAreaSelect({aspectRatio:'1:1', onSelectChange: preview});

                },100 ); 

            }



            //$('.iMask').removeClass('hide');

            $('.btn_disable').addClass('btn_enable');

        });







//----------------

function preview(img,selection){ //previewBox:150*150

    var scaleX = 150 / selection.width; 

    var scaleY = 150 / selection.height; 

    

    $('#p_prev').css({ //               

        width: Math.round(scaleX * 320) + 'px', 

        height: Math.round(scaleY * himgCH) + 'px',

        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 

        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 

    });

    //                  

    var zoom = +$('#scale').val();

    $('#x1').val(selection.x1*zoom);

    $('#y1').val(selection.y1*zoom);

    $('#x2').val(selection.x2*zoom);

    $('#y2').val(selection.y2*zoom);

    $('#w').val(selection.width*zoom);

    $('#h').val(selection.height*zoom);

}