`
eyei
  • 浏览: 6472 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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">&nbsp;&nbsp;&nbsp;用户注册(第二步)</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">&nbsp;完成注册&nbsp;</a>
</td>
</tr>
</table>
</form>
</body>
</html>
分享到:
评论
2 楼 lpfreesky 2012-02-23  
丹甫股份孤独感
1 楼 杨小同 2011-10-05  
那css和js没贴出来啊。。。

相关推荐

    Jquery 表单验证+本地图片上传-切割-预览

    在本项目中,"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例,它涵盖了几个重要的JavaScript库和技术,包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释:...

    jquery 图片预览浏览功能

    2. **图片预览**:预览功能通常涉及到在用户选择或上传图片后,即时显示图片的小缩略图。这可以通过创建一个隐藏的图片容器,然后将待显示的图片源设置为该容器的`src`属性来实现。当图片加载完成后,可以将其显示...

    jQuery图片上传压缩预览代码.zip

    【jQuery图片上传压缩预览代码】是一个利用HTML5特性实现的JavaScript库,它结合了jQuery的优势,为用户提供了一种高效且便捷的图片上传、压缩和预览的功能。这个功能在现代网页应用中非常常见,特别是在涉及到用户...

    jQuery上传图片压缩预览效果代码

    本主题聚焦于使用jQuery实现图片上传前的压缩与预览功能,这是许多网页应用中的常见需求,尤其在用户上传大尺寸图片时,为了减少服务器存储空间和提高网页加载速度,图片压缩变得尤为重要。 首先,我们需要了解图片...

    上传图片带预览功能.支持手机微信预览

    为了提供更好的用户体验,"上传图片带预览功能"是一项至关重要的特性。它允许用户在实际提交文件之前查看所选图片的效果,确保图片符合预期,减少误操作。这项功能不仅适用于PC端,同时也必须支持手机端,特别是微信...

    简单实现jQuery上传图片显示预览功能

    本文实例为大家分享了jQuery上传图片显示预览的具体代码,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;HTML5上传图片预览&lt;/title&gt; &lt;meta ...

    asp.net jquery上传图片

    在客户端,为了实现预览功能,我们可以使用File API的`FileReader`对象读取图片文件的二进制内容,转换为Base64编码的字符串,然后插入到页面的`img`标签的`src`属性中,这样用户就能在上传前看到即将上传的图片。...

    jquery照片上传工具

    2. **预览功能**:用户选择图片后,能在上传前进行预览。 3. **进度条显示**:在上传过程中,展示文件的上传进度,提供良好的反馈。 4. **错误处理**:如果上传失败,能够给出明确的错误提示。 5. **异步上传**:...

    jQuery+PHP头像图片上传预览插件

    【jQuery+PHP头像图片上传预览插件】是一个整合了前端jQuery库和后端PHP技术的实用工具,主要用于实现用户在选择头像时的实时预览、上传、编辑和删除功能。这款插件适用于各种需要用户上传个人形象照片的应用场景,...

    jquery+php 上传剪裁照片工具

    在上传照片的过程中,jQuery可以帮助我们实现用户友好的交互,如实时预览、拖放上传等。例如,可以使用`$(document).ready()`来确保页面加载完成后再执行相关的上传和裁剪功能,使用`.on('change', 'input[type=file...

    Jquery实现预览效果

    这个功能在许多网站中都很常见,比如在线图像编辑工具或上传照片的应用。以下将详细讲解如何使用jQuery来实现这一功能。 首先,我们需要在HTML中设置一个input元素用于用户选择文件,以及一个div或img元素用于展示...

    JQuery上传插件遮罩层插件(FineMessBox)

    JQuery上传插件FineMessBox便是为了提升这一体验而设计的,它巧妙地结合了遮罩层功能,为用户提供了一种优雅且高效的文件上传解决方案。本文将深入探讨FineMessBox的核心特点、工作原理以及实际应用,帮助开发者更好...

    JQUERY图片批量上传,手机版可用

    综上所述,"JQUERY图片批量上传,手机版可用"是一个利用jQuery和HTML5 File API实现的高效、易用的多图片上传解决方案,它兼顾了桌面和移动设备的用户体验,通过Ajax实现无刷新上传,提供预览功能,并可能采用了分批...

    jQuery实现图片上传预览效果功能完整实例【测试可用】

    本文实例讲述了jQuery实现图片上传预览效果功能。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;www.jb51.net jquery图片上传...

    jQuery多张图片上传预览代码

    通过结合HTML5的新特性、FileReader API和jQuery的便利性,我们可以轻松地创建出用户体验良好的多图上传预览功能。在实际项目中,你可能还需要考虑错误处理、图片大小限制、文件类型检查以及上传进度显示等功能,以...

    基于jquery实现图片上传本地预览功能

    在现代Web应用中,图片上传预览功能是一个常见的需求,特别是在用户需要上传个人照片或产品图片的情况下。通过本地预览,用户可以在不实际上传到服务器的情况下检查图片效果,避免了无效上传导致的时间和资源浪费。...

    jquery 图片裁切预览,简单拖动

    在网页开发中,图片的裁切和预览功能是常见的需求,特别是在用户上传照片时,需要提供一种方式让用户自行调整图片大小和位置,以达到理想的展示效果。jQuery库以其丰富的插件和便捷的API,为开发者提供了实现这一...

    jQuery基于svg图片上传预览代码.zip

    在本文中,我们将深入探讨如何使用jQuery和SVG技术实现图片上传预览功能,这在现代网页应用中是非常常见且实用的特性。这个压缩包“jQuery基于svg图片上传预览代码.zip”提供了一个实现多张图片预览效果的解决方案,...

    jquery头像预览裁切

    "jquery头像预览裁切"是一个常见的需求,特别是在社交媒体、个人资料设置或者在线上传照片的应用场景中。这个主题涉及到jQuery库的使用,一个强大的JavaScript库,以及cropbox.js插件,它专门用于图像裁剪和预览功能...

    weui框架实现上传、预览和删除图片功能代码

    以上代码实现了WeUI框架中图片上传、预览和删除的基本功能。在实际项目中,你可能需要进一步完善,例如添加上传进度条、错误处理、服务器端上传等逻辑。由于WeUI主要关注UI层面,因此在进行功能扩展时,通常需要结合...

Global site tag (gtag.js) - Google Analytics