图片上传即时显示缩略图的方法

jquery实现上传即显示缩略图

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="zh-CN"  dir ="ltr" >  
   < head >  
    < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" />  
   < script  type ="text/javascript"  src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" ></ script >
    < script  type ="text/javascript" >
   ( function ($){
       $.fn.extend({
           thumbnail :  function (displayExp) {
                return   this .each( function (){
                    var  display  =  $(displayExp);
                   
                    if  ($.browser.msie) {
                       display.css( ' filter ' ,  " progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) progid:DXImageTransform.Microsoft.BasicImage() " );
                   }

                   $( this ).change( function (){
                        if  ( this .value) {
                            if  ($.browser.msie) {
                               display.get( 0 ).filters.item( ' DXImageTransform.Microsoft.AlphaImageLoader ' ).src  =   this .value;
                               
                           }  else   if  ($.browser.mozilla)  {
                                if  (display.attr( " tagName " )  !=   " IMG " ) {
                                    var  img  =  $( " <img /> " );
                                   
                                   img.css({height: display.css( " height " ), width: display.css( " width " )});
                                   
                                   display.replaceWith(img);
                                   
                                   display  =  img;
                               }
                               
                               display.attr( ' src ' ,  this .files.item( 0 ).getAsDataURL());
                           }  else  {
                               $( this ).unbind( " change " , arguments.call);
                           }
                       }
                   }).change();
               });
           }
       });
   })(jQuery);

   $( function (){
       $( " #f " ).thumbnail( " #display " );
   });
    </ script >
       </ head >  
   < body >  
   < form >
   < input  type ="file"  id ="f"   />
   </ form >
   < div  id ="display"  style ="height:200px;width:200px;" ></ div >
   </ body >   
   </ html >

目前，浏览器兼容情况：
ie6: 支持
ie7: 支持
ie8: 未测试
ff2: 未测试
ff3: 支持
webkit系列: 不支持
原:http://willko.javaeye.com/blog/381684
demo:http://www.willko.cn/lab/test.html