在网上有很多类似的头像修改程序,其实里面的一些信息基本都是一致的。都是简单的在jsp界面进行头像的设置。在学习过程中,我试把这些方法使用在SSM中去。
效果:
下载地址:http://download.csdn.net/detail/qq_16553359/9501011
首先需要三个js文件和一些flash文件:
crossdomain.xml //Flash跨域策略配置文件
expressInstall.swf //用于在SWFObject插件中快速安装/升级的flash的插件
fullAvatarEditor.swf //富头像上传编辑器插件的flash文件
upload //默认演示中头像图片文件上传保存的目录
swfobject.js 这个js文件中有很多不清楚的地方
fullAvatarEditor.js
效果:
下载地址:http://download.csdn.net/detail/qq_16553359/9501011
首先需要三个js文件和一些flash文件:
crossdomain.xml //Flash跨域策略配置文件
expressInstall.swf //用于在SWFObject插件中快速安装/升级的flash的插件
fullAvatarEditor.swf //富头像上传编辑器插件的flash文件
upload //默认演示中头像图片文件上传保存的目录
swfobject.js 这个js文件中有很多不清楚的地方
fullAvatarEditor.js
function fullAvatarEditor() {
var id = 'fullAvatarEditor' //flash文件的ID
var file = 'js/fullAvatarEditor.swf'; //flash文件的路径
var version = "10.1.0"; //播放该flash所需的最低版本
var expressInstall = 'js/expressInstall.swf';//expressInstall.swf的路径
var width = 630; //flash文件的宽度
var height = 430; //flash文件的高度
var container = id; //装载flash文件的容器(如div)的id
var flashvars = {};
var callback = function () {
};
var heightChanged = false;
//智能获取参数,字符类型为装载flash文件的容器(如div)的id,第一个数字类型的为高度,第二个为宽度,第一个object类型的为参数对象,如此4个参数的顺序可随意。
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] == 'string') {
container = arguments[i];
}
else if (typeof arguments[i] == 'number') {
if (heightChanged) {
width = arguments[i];
}
else {
height = arguments[i];
heightChanged = true;
}
}
else if (typeof arguments[i] == 'function') {
callback = arguments[i];
}
else {
flashvars = arguments[i];
}
}
var vars = {
id: id
};
//合并参数
for (var name in flashvars) {
if (flashvars[name] != null) {
if (name == 'upload_url' || name == 'src_url') {
vars[name] = encodeURIComponent(flashvars[name]);
}
else {
vars[name] = flashvars[name];
}
}
}
var params = {
menu: 'true',
scale: 'noScale',
allowFullscreen: 'true',
allowScriptAccess: 'always',
wmode: 'transparent'
};
var attributes = {
id: vars.id,
name: vars.id
};
var swf = null;
var callbackFn = function (e) {
swf = e.ref;
swf.eventHandler = function (json) {
callback.call(swf, json);
};
};
swfobject.embedSWF(
file,
container,
width,
height,
version,
expressInstall,
vars,
params,
attributes,
callbackFn
);
return swf;
}
imagecut.js
swfobject.addDomLoadEvent(function () {
var swf = newfullAvatarEditor("swfContainer", {
id: 'swf',
upload_url: 'user/upload.action',
src_upload: 2
}, function (msg) {
switch (msg.code) {
case 1 :
break;
case 2 :
break;
case 3 :
if (msg.type == 0) {
alert("摄像头已准备就绪且用户已允许使用。");
}
else if (msg.type == 1) {
alert("摄像头已准备就绪但用户未允许使用!");
}
else {
alert("摄像头被占用!");
}
break;
case 5 :
if (msg.type == 0) {
alert("头像已成功保存成功!");
}
break;
}
}
);
document.getElementByIdx_x("upload").onclick = function () {
swf.call("upload");
};
});
jsp文件:
<div style="float: left;">
<divstyle="width:630px;margin: 0 auto;">
<h1 style="text-align:center">富头像上传编辑器演示</h1>
<div>
<p id="swfContainer">
本组件需要安装Flash Player后才可使用,请从<ahref="http://www.adobe.com/go/getflashplayer">这里</a>下载安装。
</p>
</div>
</div>
</div>
upload.action:
@RequestMapping("/upload")
public String upload(HttpServletRequest request) throwsException{
String contentType = request.getContentType();
UserImageCustom userImageCustom = new UserImageCustom();
if ( contentType.indexOf("multipart/form-data") >= 0)
{
Result result = new Result();
result.avatarUrls = new ArrayList();
result.success = false;
result.msg = "Failure!";
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = newServletFileUpload(factory);
FileItemIterator fileItems =upload.getItemIterator(request);
//定义一个变量用以储存当前头像的序号
int avatarNumber = 1;
//取服务器时间+8位随机码作为部分文件名,确保文件名无重复。
SimpleDateFormat simpleDateFormat = newSimpleDateFormat("yyyyMMddHHmmssS");
String fileName = simpleDateFormat.format(new Date());
Random random = new Random();
String randomCode = "";
for ( int i = 0; i < 8; i++ )
{
randomCode += Integer.toString(random.nextInt(36), 36);
}
fileName = fileName + randomCode;
//基于原图的初始化参数
String initParams = "";
BufferedInputStream inputStream;
BufferedOutputStream outputStream;
//遍历表单域
while( fileItems.hasNext() )
{
FileItemStream fileItem = fileItems.next();
String fieldName = fileItem.getFieldName();
//是否是原始图片 file 域的名称(默认的 file域的名称是__source,可在插件配置参数中自定义。参数名:src_field_name)
Boolean isSourcePic = fieldName.equals("__source");
//文件名,如果是本地或网络图片为原始文件名(不含扩展名)、如果是摄像头拍照则为 *FromWebcam
//String name = fileItem.getName();
//当前头像基于原图的初始化参数(即只有上传原图时才会发送该数据),用于修改头像时保证界面的视图跟保存头像时一致,提升用户体验度。
//修改头像时设置默认加载的原图url为当前原图url+该参数即可,可直接附加到原图url中储存,不影响图片呈现。
if ( fieldName.equals("__initParams") )
{
inputStream = newBufferedInputStream(fileItem.openStream());
byte[] bytes = new byte [inputStream.available()];
inputStream.read(bytes);
initParams = new String(bytes, "UTF-8");
inputStream.close();
}
//如果是原始图片 file 域的名称或者以默认的头像域名称的部分“__avatar”打头
else if ( isSourcePic || fieldName.startsWith("__avatar"))
{
String virtualPath = "/upload/jsp_avatar" + avatarNumber + "_"+ fileName + ".jpg";
//原始图片(默认的 file域的名称是__source,可在插件配置参数中自定义。参数名:src_field_name)。
if( isSourcePic )
{
result.sourceUrl = virtualPath = "/upload/jsp_source_" +fileName + ".jpg";
}
//头像图片(默认的 file域的名称:__avatar1,2,3...,可在插件配置参数中自定义,参数名:avatar_field_names)。
else
{
result.avatarUrls.add(virtualPath);
avatarNumber++;
}
inputStream = newBufferedInputStream(fileItem.openStream());
ServletContext application=request.getServletContext();
outputStream = new BufferedOutputStream(newFileOutputStream(application.getRealPath("/") +virtualPath.replace("/", "\\")));
Streams.copy(inputStream, outputStream, true);
inputStream.close();
outputStream.flush();
outputStream.close();
}
}
if ( result.sourceUrl != null )
{
result.sourceUrl += initParams;
}
result.success = true;
result.msg = "Success!";
userImageCustom.setImage(result.sourceUrl);
userImageCustom.setImage1(result.avatarUrls.get(0).toString());
userImageCustom.setImage2(result.avatarUrls.get(1).toString());
userImageCustom.setImage3(result.avatarUrls.get(2).toString());
UserCustom userCustom = (UserCustom)request.getSession().getAttribute("userCustom");
userImageCustom.setUid(userCustom.getUid());
userService.updateUserImage(userImageCustom);
userCustom =userService.findUserByUid(userCustom.getUid());
request.getSession().setAttribute("userCustom",userCustom);
if(result.avatarUrls.size() > 0){
request.getSession().setAttribute("success", "success");
}
}
return "/jsp/index";
}
result类:
public class Result {
public Boolean success;
public String msg;
public String sourceUrl;
public ArrayList avatarUrls;
}