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>     
posted @ 2010-07-29 08:27  你妹的sb  阅读(8874)  评论(0)  编辑  收藏  举报
百度一下