<%@ 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. LeetCode题解-----Wildcard Matching

    题目描述: '?' Matches any single character. '*' Matches any sequence of characters (including the empty ...

  2. TestNG 入门教程

    原文出处:http://www.cnblogs.com/TankXiao/p/3888070.html 阅读目录 TestNG介绍 在Eclipse中在线安装TestNG 在Eclipse中离线安装T ...

  3. dubbox 增加google-gprc/protobuf支持

    好久没写东西了,今年实在太忙,基本都在搞业务开发,晚上来补一篇,作为今年的收官博客.google-rpc 正式发布以来,受到了不少人的关注,这么知名的rpc框架,不集成到dubbox中有点说不过去. ...

  4. .NET高性能框架Chloe.ORM-完美支持MySql

    扯淡 这是一款轻量.高效的.NET C#数据库访问框架(ORM).查询接口借鉴 Linq(但不支持 Linq).借助 lambda 表达式,可以完全用面向对象的方式就能轻松执行多表连接查询.分组查询. ...

  5. VS2013快捷键及技巧

    VS2013快捷键很多,灵活使用常用快捷键及各项技巧可以让你事半功倍.下面的visual studio 2013快捷键和操作技巧你知道多少? 1.回到上一个光标位置/前进到下一个光标位置 1)回到上一 ...

  6. java 分页功能

    1.分页工具类 package com.bw.shop.util; import java.util.List; import com.sun.org.apache.regexp.internal.r ...

  7. css3-无缝滚动

    @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果. 动画的名称和运行所需时间是必须的 帧动画:将动画名称赋给选择器 ...

  8. [原创]vscode初体验

    这段时间,在网上看见很多从.net转java的,为什么会造成这样的情况,我感觉有几点 1.  微软在中国的生态不好,死要钱,很多公司都不想花这部分钱 2.  做.net开发人,工资普遍较低 前言 闲聊 ...

  9. Android基础总结(四)

    网络图片查看器 确定图片的网址 发送http请求 URL url = new URL(address); //获取连接对象,并没有建立连接 HttpURLConnection conn = (Http ...

  10. input type="datetime-local" 时placeholder不显示

    一个坑,input的type="datetime-local" 时,电脑上会显示提示,如图 <input type="datetime-local" na ...