jsp 头像上传显示部分代码实现
<%@ 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 头像上传显示部分代码实现的更多相关文章
- day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息
目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...
- 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)
今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...
- 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...
- [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能
很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...
- struts 头像上传
java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...
- Html5实现头像上传和编辑,保存为Base64的图片过程
一.Html5实现头像上传和编辑 插件地址: html5手机端裁剪图片上传头像代码 本地项目引入注意事项: 1.将html的js搬到外面的js文件中,便于管理 2.图片样式在html都是在页面写死,需 ...
- php+flash头像上传组件
有会员系统的站点一般都会有一个头像上传组件,一般做的最简单的是 这样的方式长处是代码写的简单,仅仅要推断图片大小和类型,然后更新数据库.可是用户体验不高.并且站点其它页面假设要使用较小的20X20或1 ...
- qt实现头像上传功能
想必大家都使用过qt的自定义头像功能吧,那么图1应该不会陌生,本片文章我就是要模拟一个这样的功能,虽然没有这么强大的效果,但是能够满足一定的需求. 图1 qq上传图片 首先在讲解功能之前,我先给出一片 ...
- spring--mvc添加用户及用户头像上传
spring--mvc添加用户及用户头像上传 添加用户步骤: 1.用ajax获取省份信息 2.添加用户 代码:register.jsp <meta http-equiv="Conten ...
随机推荐
- java实现单链表的整表创建
package com.java.dataStruct; public class Node<E> { E item; Node next; public Node(){ } public ...
- angularJS(2)
angularJS(2) 今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl&q ...
- [LeetCode] Candy 分糖果问题
There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...
- [LeetCode] Distinct Subsequences 不同的子序列
Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...
- 开发 ASP.NET vNext 初步总结(使用Visual Studio 14 CTP1)
新特性: vNext又称MVC 6.0,不再需要依赖System.Web,占用的内存大大减少(从前无论是多么简单的一个请求,System.Web本身就要占用31KB内存). 可以self-host模式 ...
- 使用markdown
一.在windows下使用markdown MarkdownPad:MarkdownPad is a full-featured markdown editor for windows. Awsomi ...
- Linux之sar命令介绍
sar(System Activity Reporter系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告,包括:文件的读写情况.系统调用的使用情 ...
- 线程join理解
1.python默认参数创建线程后,不管主线程是否执行完毕,都会等待子线程执行完毕才一起退出,有无join结果一样 2.如果创建线程,并且设置了daemon为true,即thread.setDaemo ...
- Oracle Entity6 在查询View的时候出现重复数据
在使用oracle + Entity6的时候, 遇到一个问题,在查询View的时候,在工具中执行View的sql语句,是两条不同的数据. 但是从Entity中查询出来却是两条相同的数据. 查看了一下e ...
- 7 HTML&JS等前端知识系列之jquery的事件绑定
preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...