jQuery--上传预览图片

 

< html  >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gbk"   />
< script  type ="text/javascript"  src ="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" ></ script >
< script  language ="javascript" >
$( function (){
     var  ei  =  $( " #large " );
    ei.hide();
    $( " #img1, img " ).mousemove( function (e){
        ei.css({top:e.pageY,left:e.pageX}).html( ' <img style="border:1px solid gray;" src=" '   +   this .src  +   ' " /> ' ).show();
    }).mouseout(  function (){
        ei.hide();
    })
    $( " #f1 " ).change( function (){
        $( " #img1 " ).attr( " src " , " http://www.cnblogs.com/Pynix/admin/file:/// " + $( " #f1 " ).val());
    })
});
</ script >
< style  type ="text/css" >
    #large { position : absolute ; display : none ; z-index : 999 ; }
</ style >
</ head >
< body >

上传预览图片: < br >
< input  id ="f1"  name ="f1"  type ="file"   />< br >
< img  id ="img1"  width ="120"  height ="60"  src ="http://www.cssrain.cn/skins/tim/logo-jq.gif" >

< div  id ="large" ></ div >

< br >< br >< br >< br >< br >< br >
鼠标滑过预览图片: < br >
< img  width ="120"  height ="60"  src ="http://www.cssrain.cn/skins/tim/logo-jq.gif" >< br >
< img  width ="120"  height ="60"  src ="http://www.cssrain.cn/demo/JQuery+API/logo-json.gif" >< br >
</ body >
</ html >

本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=538

转载于:https://www.cnblogs.com/Pynix/archive/2009/04/30/1447033.html