Jquery 实现图片上传预览

最新推荐文章于 2021-08-18 17:55:58 发布

lovetopceo

最新推荐文章于 2021-08-18 17:55:58 发布

阅读量101

点赞数

分类专栏： Javascript 文章标签： jQuery CSS HTML ViewUI

Javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<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>