<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page contentType="text/html; charset=UTF-8"%> <div class="container" style="margin-top: 47px;">
<div class="row">
<s:form action="headPicChangeDo" method="post" name="operation"
enctype="multipart/form-data" theme="simple"
cssClass="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">图片文件</label>
<div class="col-sm-6">
<s:file name="myPic" size="50"
cssClass="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">预览</label>
<div class="col-sm-6"> <img id="image" <s:if
test="#session.SESSION_EMPLOYEE.headPic != '' && #session.SESSION_EMPLOYEE.headPic != null"> src="downloadFile.action?fileKey=<s:property value='#session.SESSION_EMPLOYEE.headPic' />" </s:if> width="100" height="100" /><p></p> <%-- <s:if
test="#session.SESSION_EMPLOYEE.headPic != '' && #session.SESSION_EMPLOYEE.headPic != null">
<img id="headPic" alt="头像"
src="downloadFile.action?fileKey=<s:property value='#session.SESSION_EMPLOYEE.headPic' />"
width="100" height="100" class="img-circle" />
</s:if>
<s:else>
<img id="headPic" alt="头像"
src="data:images/portrait.gif" width="100"
height="100" class="img-circle" />
</s:else> --%>
</div>
</div> <div class="form-group">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<button type="submit" class="btn btn-primary btn-sm">
保 存</button>
</div>
</div>
</s:form>
</div>
</div> <script>
$(function() {
$('input[type=file]').change(function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function() {
// 通过 reader.result 来访问生成的 DataURL
var url = reader.result;
$("#image").attr('src', url);
};
reader.readAsDataURL(file);
});
})
</script>

jsp 头像上传显示部分代码实现的更多相关文章

  1. day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息

    目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...

  2. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  3. 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能

    作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...

  4. [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

    很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...

  5. struts 头像上传

    java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...

  6. Html5实现头像上传和编辑,保存为Base64的图片过程

    一.Html5实现头像上传和编辑 插件地址: html5手机端裁剪图片上传头像代码 本地项目引入注意事项: 1.将html的js搬到外面的js文件中,便于管理 2.图片样式在html都是在页面写死,需 ...

  7. php+flash头像上传组件

    有会员系统的站点一般都会有一个头像上传组件,一般做的最简单的是 这样的方式长处是代码写的简单,仅仅要推断图片大小和类型,然后更新数据库.可是用户体验不高.并且站点其它页面假设要使用较小的20X20或1 ...

  8. qt实现头像上传功能

    想必大家都使用过qt的自定义头像功能吧,那么图1应该不会陌生,本片文章我就是要模拟一个这样的功能,虽然没有这么强大的效果,但是能够满足一定的需求. 图1 qq上传图片 首先在讲解功能之前,我先给出一片 ...

  9. spring--mvc添加用户及用户头像上传

    spring--mvc添加用户及用户头像上传 添加用户步骤: 1.用ajax获取省份信息 2.添加用户 代码:register.jsp <meta http-equiv="Conten ...

随机推荐

  1. 【repost】浏览器内核、渲染引擎、js引擎

    [1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具[2]常见引擎 渲染引擎: firef ...

  2. js中避免函数名和变量名跟别人冲突

    待补充 .... 参考链接: http://blog.csdn.net/formyqianduan/article/details/52118690

  3. EF查询之性能优化技巧

    上一篇:EF使用CodeFirst方式生成数据库&技巧经验 前言 EF相信大部分同学都已经经常使用了,可是你的查询高效吗? 今天我就以个人使用经验来讲讲在使用EF做查询的时候大家都容易忽略的性 ...

  4. kubernetes 1.4.5集群部署

    2016/11/16 23:39:58 环境: centos7 [fu@centos server]$ uname -a Linux centos 3.10.0-327.el7.x86_64 #1 S ...

  5. C# 提交网页请求时出现如下错误: System.Net.WebException: 操作超时

    原因一: 连接超时时间 Timeout 以及写入Post数据超时时间 ReadWriteTimeout 设置得太短,一般要设置大于6000ms. 原因二: Expect100Continue 属性的值 ...

  6. Ajax入门(二)

    接收服务器返回的消息 1,定义触发Ajax的js效果 2,创建Ajax方法 如果返回的数据是XML,则需使用aj.responseXML 3,接收服务器返回的消息,并显示在网页上 错误案例:直接接收服 ...

  7. 客户端Socket

    导语 java.net.Socket类是JAVA完成客户端TCP操作的基础类.其他建立TCP网络连接的类(如URL,URLConnection和EditorPane)最终会调用这个类的方法.这个类本身 ...

  8. [转]如何设置eclipse中js默认打开为java Editor

    打开window-preference -> General-Editors-File Associator 看到右边的.js下边就是设置默认打开方式了 转自百度知道:http://zhidao ...

  9. MySQL练习题参考答案

    MySQL练习题参考答案 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 思路: 获取所有有生物课程的人(学号,成绩) - 临时表 获取所有有物理课程的人(学号,成绩) - 临时表 根据[ ...

  10. Socket编程实践(3) 多连接服务器实现与简单P2P聊天程序例程

    SO_REUSEADDR选项 在上一篇文章的最后我们贴出了一个简单的C/S通信的例程.在该例程序中,使用"Ctrl+c"结束通信后,服务器是无法立即重启的,如果尝试重启服务器,将被 ...