JSは各ブラウザのローカル画像に対応してインスタントプレビュー効果をアップロードする

JSは各ブラウザのローカル画像に対応してインスタントプレビュー効果をアップロードする
以前は仕事でこのような需要に出会ったことがあります.その时も悩んでいました.googleも長い間、適切なdemoに出会っていませんでした.今日はわざわざこの方面の問題を研究しました.だから、簡単なdemoをして、現地のアップロード画像のプレビュー効果を実現しました.標準ブラウザ(firefox,chrome,IE 10などの他のブラウザ)では、HTML 5のコンテンツを用いて画像のインスタントプレビュー効果を実現している.IE 10以下のブラウザではフィルタを用いて画像表示の問題を解決している.コードを見る前に、次の点について説明します.
HTML 5のFileReaderオブジェクト:FileReaderオブジェクトは主にファイルをメモリに読み込み、ファイル中のデータを読み込む.これまでfirefox 3.6+ chrome6+ Safari5.2+Opera 11+およびIE 10ブラウザはFileReaderオブジェクトをサポートします.次の5つの方法があります.
1. readBinaryString 
2. readAsText
3.readAsDataURLオブジェクトまたはファイルのデータを一連のDataURL文字列として読み込むことは、データを特殊な形式のURLアドレス形式で直接ページに読み込むことである.
4. readAsArrayBuffer
 5. abort.
私たちが今使うのは3つ目なので、説明しました.他の具体的な資料は関連資料を見ることができますが、ここではあまり説明しません.
IE:document.selectionすなわち資料は以下のように解釈される.
selectionオブジェクトは、現在アクティブ化されている選択領域、すなわちハイライトされたテキストブロック、および/またはドキュメント内のユーザーがいくつかの操作を実行できる他の要素を表します.selectionオブジェクトの典型的な用途は、ドキュメントのどの部分が処理されているか、または操作の結果としてユーザーに出力されているかを識別するために、ユーザーとしての入力です. 
ユーザーとスクリプトは、選択領域を作成できます.ユーザが選択領域を作成する方法は、ドキュメントの一部をドラッグすることです.スクリプトが選択領域を作成する方法は、テキスト領域または類似オブジェクト上でselectメソッドを呼び出すことです.現在の選択領域を取得するには、documentオブジェクトにselectionキーを適用します.選択領域に対してアクションを実行するには、まずcreateRangeメソッドを使用して選択領域からテキスト領域オブジェクトを作成します.1つのドキュメントに同じ時間に1つの選択領域しかありません.選択した領域のタイプによって、テキストおよび/または要素ブロックが空または含まれるかが決まります.空の選択領域には何も含まれていませんが、ドキュメント内の位置フラグとして使用できます.
以下はJSPedgleのDEMOリンクです.
効果を見たいなら、私をクリックしてください。
以下にHTMLコードを示します.

<form enctype="multipart/form-data" name="form1">
    <input id="f" type="file" name="f" onchange="change()" />
    <div class="upload">    </div>
    <p>  :</p>
    <p>
        <img id="preview" alt="" name="pic" />
    </p>
</form>

JSコードは以下の通りである.

function change() {
    var pic = document.getElementById("preview"),
        file = document.getElementById("f");

    var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();

     // gif IE         
     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
         alert("        png  jpg  jpeg  ！"); 
         return;
     }
     var isIE = navigator.userAgent.match(/MSIE/)!= null,
         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;

     if(isIE) {
        file.select();
        var reallocalpath = document.selection.createRange().text;

        // IE6     img src             
         if (isIE6) {
            pic.src = reallocalpath;
         }else {
            //  IE6   IE          img src        ，           
             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
             //   img src base64                   
             pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
         }
     }else {
        html5Reader(file);
     }
}

 function html5Reader(file){
     var file = file.files[0];
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function(e){
         var pic = document.getElementById("preview");
         pic.src=this.result;
     }
 }

ローカルDemoダウンロード