本地圖檔預覽 (支援IE6、IE7、IE8、Firefox3)

最近在做注冊資訊頁面時，有一個子產品是更改頭像，即是上傳本地圖檔，但是不同的浏覽器對本地圖檔預覽的支援方法不同，我先網上看到了一篇解決此問題的方法，積累下來作為資源，同時希望給大家提供一些幫助，我們共同成長！！

IE6下可以直接從file的value擷取圖檔路徑來顯示預覽。

IE7和IE8下通過select擷取file的圖檔路徑，再用濾鏡來顯示預覽。

FireFox下調用file的getAsDataURL方法擷取Data URI資料來顯示預覽。

下面是一個完整的Demo：

< html >

< head >

< script  src ="http://deepliquid.com/projects/Jcrop/js/jquery.min.js" ></ script >

</ head >

< body >

< input  type ="file"  id ="picture"  name ="picture"  size ="35"  value =""  onchange ="setImg(this)" />

< div  id ="preview_fake"  style ="margin-left: 50px" >

</ div >

< img  id ="preview_size_fake" />

< style  type ="text/css" >

        #preview_fake {

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

         }

        #preview_size_fake {

            filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image) ;

            visibility : hidden ;

         }

</ style >

< script  type ="text/javascript" >

     function  setImg(obj){

         if (  ! obj.value.match(  / .jpg|.gif|.png|.bmp / i ) ){

            alert( ' 圖檔格式無效！ ' );

             return   false ;

        }

        $( " #preview_fake " ).empty();

         var  img  =  document.createElement( " img " );

        img.setAttribute( " src " ,  "" );

        img.setAttribute( " id " ,  " preview " );

        document.getElementById( " preview_fake " ).appendChild(img);

         if ($.browser.msie){

            if ($.browser.version  ==   6.0 ){

              $( " #preview " ).attr( " src " ,obj.value);

           } else {

               var  objPreview  =  document.getElementById( ' preview '  );

               var  objPreviewFake  =  document.getElementById( ' preview_fake '  );

               var  objPreviewSizeFake  =  document.getElementById( ' preview_size_fake '  );

              obj.select();

               var  imgSrc  = document.selection.createRange().text;

              objPreviewFake.filters.item( ' DXImageTransform.Microsoft.AlphaImageLoader ' ).src =  imgSrc;

              objPreviewSizeFake.filters.item( ' DXImageTransform.Microsoft.AlphaImageLoader ' ).src =  imgSrc;

              autoSizePreview(objPreviewFake,objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight );

              objPreview.style.display  = ' none ' ;

           }

        }

         if ($.browser.mozilla){

            $( " #preview " ).attr( " src " ,obj.files[ 0 ].getAsDataURL());

        }

         if ($.browser.opera){

            alert( " 暫時不支援Opera浏覽器 " );

        }

         if ($.browser.safari){

            alert( " 暫時不支援Safari浏覽器 " );

        }

    }

</ script >

</ body >

</ html >