jquery上传照片预览功能
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="skin/css/base.css">
<link href="skin/css/css.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script language="javascript">
$(function(){
var ei = $("#large");
ei.hide();
$("#img1").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("slow");
})
$("#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 leftmargin="8" topmargin="8" background='skin/images/allbg.gif'>
<form name="frm" id="frm"action="addUser.action" method="post">
<table width="40%" border="0" cellpadding="2" cellspacing="1" bgcolor="#D1DDAA" align="center" style="margin-top:8px">
<tr bgcolor="#E7E7E7">
<td height="24" colspan="10" background="skin/images/tbg.gif"> 用户注册（第二步）</td>
</tr>
<tr align='center' bgcolor="#FFFFFF" height="22" >
<td>照片预览:</td>
<td align="left">
<table>
<tr height="160">
<td>
<img id="img1" width="60" height="60">
</td>
<td><div id="large"></div></td>
</tr>
</table>
</td>
</tr>
<tr align='center' bgcolor="#FFFFFF" height="22" >
<td>上传照片:</td>
<td align="left"><table>
<tr>
<td>
<input type='file' name='yx' id='f1' style='width:150px'/>
</td>
<td></td>
</tr>
</table></td>
</tr>
<tr bgcolor="#FAFAF1">
<td height="50" colspan="10" align="center">
<a id="sub" class="coolbg"> 完成注册 </a>
</td>
</tr>
</table>
</form>
</body>
</html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="skin/css/base.css">
<link href="skin/css/css.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script language="javascript">
$(function(){
var ei = $("#large");
ei.hide();
$("#img1").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("slow");
})
$("#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 leftmargin="8" topmargin="8" background='skin/images/allbg.gif'>
<form name="frm" id="frm"action="addUser.action" method="post">
<table width="40%" border="0" cellpadding="2" cellspacing="1" bgcolor="#D1DDAA" align="center" style="margin-top:8px">
<tr bgcolor="#E7E7E7">
<td height="24" colspan="10" background="skin/images/tbg.gif"> 用户注册（第二步）</td>
</tr>
<tr align='center' bgcolor="#FFFFFF" height="22" >
<td>照片预览:</td>
<td align="left">
<table>
<tr height="160">
<td>
<img id="img1" width="60" height="60">
</td>
<td><div id="large"></div></td>
</tr>
</table>
</td>
</tr>
<tr align='center' bgcolor="#FFFFFF" height="22" >
<td>上传照片:</td>
<td align="left"><table>
<tr>
<td>
<input type='file' name='yx' id='f1' style='width:150px'/>
</td>
<td></td>
</tr>
</table></td>
</tr>
<tr bgcolor="#FAFAF1">
<td height="50" colspan="10" align="center">
<a id="sub" class="coolbg"> 完成注册 </a>
</td>
</tr>
</table>
</form>
</body>
</html>