本地图片预览 (支持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 >