<%@ 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>
分享到：
相关推荐
在本项目中，"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例，它涵盖了几个重要的JavaScript库和技术，包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释：...
2. **图片预览**：预览功能通常涉及到在用户选择或上传图片后，即时显示图片的小缩略图。这可以通过创建一个隐藏的图片容器，然后将待显示的图片源设置为该容器的`src`属性来实现。当图片加载完成后，可以将其显示...
【jQuery图片上传压缩预览代码】是一个利用HTML5特性实现的JavaScript库，它结合了jQuery的优势，为用户提供了一种高效且便捷的图片上传、压缩和预览的功能。这个功能在现代网页应用中非常常见，特别是在涉及到用户...
本主题聚焦于使用jQuery实现图片上传前的压缩与预览功能，这是许多网页应用中的常见需求，尤其在用户上传大尺寸图片时，为了减少服务器存储空间和提高网页加载速度，图片压缩变得尤为重要。 首先，我们需要了解图片...
为了提供更好的用户体验，"上传图片带预览功能"是一项至关重要的特性。它允许用户在实际提交文件之前查看所选图片的效果，确保图片符合预期，减少误操作。这项功能不仅适用于PC端，同时也必须支持手机端，特别是微信...
本文实例为大家分享了jQuery上传图片显示预览的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta ...
在客户端，为了实现预览功能，我们可以使用File API的`FileReader`对象读取图片文件的二进制内容，转换为Base64编码的字符串，然后插入到页面的`img`标签的`src`属性中，这样用户就能在上传前看到即将上传的图片。...
2. **预览功能**：用户选择图片后，能在上传前进行预览。 3. **进度条显示**：在上传过程中，展示文件的上传进度，提供良好的反馈。 4. **错误处理**：如果上传失败，能够给出明确的错误提示。 5. **异步上传**：...
【jQuery+PHP头像图片上传预览插件】是一个整合了前端jQuery库和后端PHP技术的实用工具，主要用于实现用户在选择头像时的实时预览、上传、编辑和删除功能。这款插件适用于各种需要用户上传个人形象照片的应用场景，...
在上传照片的过程中，jQuery可以帮助我们实现用户友好的交互，如实时预览、拖放上传等。例如，可以使用`$(document).ready()`来确保页面加载完成后再执行相关的上传和裁剪功能，使用`.on('change', 'input[type=file...
这个功能在许多网站中都很常见，比如在线图像编辑工具或上传照片的应用。以下将详细讲解如何使用jQuery来实现这一功能。 首先，我们需要在HTML中设置一个input元素用于用户选择文件，以及一个div或img元素用于展示...
JQuery上传插件FineMessBox便是为了提升这一体验而设计的，它巧妙地结合了遮罩层功能，为用户提供了一种优雅且高效的文件上传解决方案。本文将深入探讨FineMessBox的核心特点、工作原理以及实际应用，帮助开发者更好...
综上所述，"JQUERY图片批量上传，手机版可用"是一个利用jQuery和HTML5 File API实现的高效、易用的多图片上传解决方案，它兼顾了桌面和移动设备的用户体验，通过Ajax实现无刷新上传，提供预览功能，并可能采用了分批...
本文实例讲述了jQuery实现图片上传预览效果功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net jquery图片上传...
通过结合HTML5的新特性、FileReader API和jQuery的便利性，我们可以轻松地创建出用户体验良好的多图上传预览功能。在实际项目中，你可能还需要考虑错误处理、图片大小限制、文件类型检查以及上传进度显示等功能，以...
在现代Web应用中，图片上传预览功能是一个常见的需求，特别是在用户需要上传个人照片或产品图片的情况下。通过本地预览，用户可以在不实际上传到服务器的情况下检查图片效果，避免了无效上传导致的时间和资源浪费。...
在网页开发中，图片的裁切和预览功能是常见的需求，特别是在用户上传照片时，需要提供一种方式让用户自行调整图片大小和位置，以达到理想的展示效果。jQuery库以其丰富的插件和便捷的API，为开发者提供了实现这一...
在本文中，我们将深入探讨如何使用jQuery和SVG技术实现图片上传预览功能，这在现代网页应用中是非常常见且实用的特性。这个压缩包“jQuery基于svg图片上传预览代码.zip”提供了一个实现多张图片预览效果的解决方案，...
"jquery头像预览裁切"是一个常见的需求，特别是在社交媒体、个人资料设置或者在线上传照片的应用场景中。这个主题涉及到jQuery库的使用，一个强大的JavaScript库，以及cropbox.js插件，它专门用于图像裁剪和预览功能...
以上代码实现了WeUI框架中图片上传、预览和删除的基本功能。在实际项目中，你可能需要进一步完善，例如添加上传进度条、错误处理、服务器端上传等逻辑。由于WeUI主要关注UI层面，因此在进行功能扩展时，通常需要结合...