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 ...
随机推荐
- IO流中将字节流转成字符流的方法
//字节流--->字符流 1. public class TestIO { public static void main(String[] args) throws IOException { ...
- BZOJ 3529: [Sdoi2014]数表 [莫比乌斯反演 树状数组]
3529: [Sdoi2014]数表 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 1399 Solved: 694[Submit][Status] ...
- javascript中的自执行函数
学习es6的时候遇到了自执行函数,感觉有必要写下来,一方面加深自己的记忆,另一方面还能分享给大家. 什么是自执行函数? 自执行函数就是为了不污染全局变量命名空间的一中匿名函数,相当于自己创建了一个作用 ...
- Centos 7 minimal install 无网络无ifconfig的解决
Centos7这个比较不厚道, minimal install下居然不带net-tools 先要连上网络 修改/etc/sysconfig/network-scripts/ifcfg-ens12312 ...
- Python基本数据结构
第一部分: #列表a = [11,22,24,29,30,32] #1 把28插入到列表的末端 >>> a.append(28) >>> a [11, 22, 24 ...
- (原创)使用VMware安装Ubuntu,怎么无法使用startx进入桌面模式?
最近在VMware中安装Ubuntu时,发现VMware的快速安装后是文本模式,无法使用startx进入桌面模式,非常不方便.此问题为默认安装方式,需要设置安装方式. 操作系统:Windows 8.1 ...
- [LeetCode] Reconstruct Itinerary 重建行程单
Given a list of airline tickets represented by pairs of departure and arrival airports [from, to], r ...
- 更新过程 renewal process
一类随机过程.是描述元件或设备更新现象的一类随机过程.设对某元件的工作进行观测.假定元件的使用寿命是一随机变量,当元件发生故障时就进行修理或换上新的同类元件,而且元件的更新是即时的(修理或更换元件所需 ...
- Dao跨事务调用实现转账功能
1.首先在数据库当中创建数据库,并且创建它的 实现类 package com.beiwo.epet.entity; public class Account { private int id; pri ...
- swfit-学习笔记(数组的使用)
Swift数组的使用,参考:<The Swift Programming Language>中文版 // Copyright (c) 2015年 Zsmile. All rights re ...