jquery實現圖片上傳預覽

1. <html >    
2. <head>    
3. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />    
4. <script type="text/javascript" src="jquery-1.3.2.js"></script>//注意要匯入Jquery的類庫    
5. <script language="javascript">    
6. $(function(){    
7.     var ei = $("#large");//擷取Div    
8.     ei.hide();    
9.     $("#img1, img").mousemove(function(e){//img1是 顯示 上傳圖片的縮圖    
10. //滑鼠經過的時候 給div加上 圖片    
11.         ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();    
12.     }).mouseout( function(){    
13.         ei.hide();//否則 就隱藏    
14.     })    
15.     $("#f1").change(function(){ //上傳 控制項 上傳的 預覽    
16.         $("#img1").attr("src","file:///"+$("#f1").val());    
17.     })    
18. });    
19. </script>    
20. <style type="text/css">    
21.     #large{position:absolute;display:none;z-index:999;}    
22. </style>    
23. </head>    
24. <body>    
25. 上傳預覽圖片:<br>    
26. <input id="f1" name="f1" type="file" /><br>    
27. <img id="img1" width="120" height="60" src="http://www.hualang.net/images/hualanglogo.jpg">    
28. <div id="large"></div>    
29. <br><br><br><br><br><br>    
30. 滑鼠滑過預覽圖片:<br>    
31. <img width="120" height="60" src="http://www.hualang.net/images/hualanglogo.jpg"><br>    
32. <img width="120" height="60" src="http://www.hualang.net/images/hualanglogo.jpg"><br>    
33. </body>    
34. </html>     

<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <script type="text/javascript" src="jquery-1.3.2.js"></script>//注意要匯入Jquery的類庫 <script language="javascript"> $(function(){     var ei = $("#large");//擷取Div     ei.hide();     $("#img1, img").mousemove(function(e){//img1是 顯示 上傳圖片的縮圖 //滑鼠經過的時候 給div加上 圖片         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","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.hualang.net/images/hualanglogo.jpg"> <div id="large"></div> <br><br><br><br><br><br> 滑鼠滑過預覽圖片:<br> <img width="120" height="60" src="http://www.hualang.net/images/hualanglogo.jpg"><br> <img width="120" height="60" src="http://www.hualang.net/images/hualanglogo.jpg"><br> </body> </html>