上传编辑头像
今天给大家介绍一款强大的Flash头像编辑上传插件。富头像上传编辑，支持本地，预览和视频拍照和网络加载的flash头像编辑插件，可缩放，裁剪，定义和调色等。说了这么多，咱们先看看效果怎样
首先下载插件地址
http://pan.baidu.com/s/1qWBhTne
加压文件将以下js引入工程
swfobject.js
fullAvatarEditor.js
web工程结构
在web项目中添加以下两个flash文件
FullAvatarEditor.swf'和expressInstall.swf
工程基本结构
创建jsp页面
<%@ pagelanguage="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Inserttitle here</title>
</head>
<p id="swfContainer">
本组件需要安装Flash Player后才可使用，请从<ahref="http://dl.pconline.com.cn/html_2/1/114/id=8122&pn=0.html"target="_blank">这里</a>下载安装。
</p>
<buttontype="button" id="upload"style="display:none;margin-top:8px;">点击上传</button>
<scripttype="text/javascript"src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/scripts/swfobject.js"></script>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/scripts/fullAvatarEditor.js"></script>
<scripttype="text/javascript">
swfobject.addDomLoadEvent(function() {
//以下两行代码正式环境下请删除
if(location.href.indexOf('http://') == -1)
alert('请于WEB服务器环境中查看、测试！\n\n既 http://*/simpleDemo.html\n\n而不是本地路径 file:///*/simpleDemo.html的方式');
var swf = newfullAvatarEditor("fullAvatarEditor.swf","expressInstall.swf", "swfContainer", {
id: 'swf',
upload_url:'/tewst/testServlet?userid=999&username=looselive', //上传接口，这里为后台对应servlet方法
method: 'post', //传递到上传接口中的查询参数的提交方式。更改该值时，请注意更改上传接口中的查询参数的接收方式
src_upload: 2,//是否上传原图片的选项，有以下值：0-不上传；1-上传；2-显示复选框由用户选择
avatar_box_border_width: 0,
avatar_sizes:'100*100|50*50|32*32',
avatar_sizes_desc: '100*100像素|50*50像素|32*32像素'
}, function(msg) {
switch (msg.code)
{
case 1 :
// alert("页面成功加载了组件！");
break;
case 2 :
// alert("已成功加载图片到编辑面板。");
document.getElementById("upload").style.display ="inline";
break;
case 3 :
if (msg.type == 0)
{
alert("摄像头已准备就绪且用户已允许使用。");
}
else if (msg.type == 1)
{
alert("摄像头已准备就绪但用户未允许使用！");
}
else
{
alert("摄像头被占用！");
}
break;
case 5 :
if (msg.type == 0)
{
if(msg.content.sourceUrl)
{
alert("原图已成功保存至服务器，url为：\n" +msg.content.sourceUrl + "\n\n" + "头像已成功保存至服务器，url为：\n" +msg.content.avatarUrls.join("\n\n") + "\n\n传递的userid=" + msg.content.userid + "&username=" +msg.content.username);
}
else
{
alert("头像已成功保存至服务器，url为：\n" +msg.content.avatarUrls.join("\n\n") + "\n\n传递的userid=" + msg.content.userid + "&username=" +msg.content.username);
}
}
break;
}
}
);
document.getElementById("upload").onclick = function() {
swf.call("upload");
};
});
</script>
</html>
创建servlet类
创建一个处理图片action类
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;
/**
后台图片处理操作类
**/
public class actionspost extends HttpServlet {
/**
* @Fields serialVersionUID :
*/
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
try {
getimage(request, response);
} catch (FileUploadException e) {
e.printStackTrace();
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
/**
* 图片保存类
*
* @param request
* @param response
* @throws UnsupportedEncodingException
* @throws FileUploadException
* @throws IOException
*/
public void getimage(HttpServletRequest request,
HttpServletResponse response) throws UnsupportedEncodingException,
FileUploadException, IOException {
String contentType = request.getContentType();
if (contentType.indexOf("multipart/form-data") >= 0) {
ResultMessage result = new ResultMessage();
result.avatarUrls = new ArrayList();
result.success = false;
result.msg = "Failure!";
String userid;
String username;
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
FileItemIterator fileItems = upload.getItemIterator(request);
// 定义一个变量用以储存当前头像的序号
int avatarNumber = 1;
// 取服务器时间+8位随机码作为部分文件名，确保文件名无重复。
SimpleDateFormat simpleDateFormat = new SimpleDateFormat(
"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 = null;
BufferedOutputStream outputStream = null;
// 遍历表单域
while (fileItems.hasNext()) {
FileItemStream fileItem = fileItems.next();
String fieldName = fileItem.getFieldName();
// 是否是原始图片 file 域的名称（默认的 file
// 域的名称是__source，可在插件配置参数中自定义。参数名：src_field_name）
Boolean isSourcePic = fieldName.equals("__source");
// 当前头像基于原图的初始化参数（只有上传原图时才会发送该数据，且发送的方式为POST），用于修改头像时保证界面的视图跟保存头像时一致，提升用户体验度。
// 修改头像时设置默认加载的原图url为当前原图url+该参数即可，可直接附加到原图url中储存，不影响图片呈现。
if (fieldName.equals("__initParams")) {
inputStream = new BufferedInputStream(fileItem.openStream());
byte[] bytes = new byte[inputStream.available()];
inputStream.read(bytes);
initParams = new String(bytes, "UTF-8");
inputStream.close();
}
// 如果是原始图片 file
// 域的名称或者以默认的头像域名称的部分“__avatar”打头(默认的头像域名称：__avatar1,2,3...，可在插件配置参数中自定义，参数名：avatar_field_names)
else if (isSourcePic || fieldName.startsWith("__avatar")) {
String virtualPath = "/upload/jsp_avatar" + avatarNumber
+ "_" + fileName + ".jpg";
// 原始图片（默认的 file
// 域的名称是__source，可在插件配置参数中自定义。参数名：src_field_name）。
if (isSourcePic) {
// 文件名，如果是本地或网络图片为原始文件名、如果是摄像头拍照则为 *FromWebcam.jpg
String sourceFileName = fileItem.getName();
// 原始文件的扩展名(不包含“.”)
String sourceExtendName = sourceFileName
.substring(sourceFileName.lastIndexOf('.') + 1);
result.sourceUrl = virtualPath = String.format(
"/upload/jsp_source_%s.%s", fileName,
sourceExtendName);
}
// 头像图片（默认的 file
// 域的名称：__avatar1,2,3...，可在插件配置参数中自定义，参数名：avatar_field_names）。
else {
result.avatarUrls.add(virtualPath);
avatarNumber++;
}
try {
inputStream = new BufferedInputStream(
fileItem.openStream());
} catch (IOException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
try {
outputStream = new BufferedOutputStream(
new FileOutputStream(getServletContext()
.getRealPath("/")
+ virtualPath.replace("/", "\\")));
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
Streams.copy(inputStream, outputStream, true);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
inputStream.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
outputStream.flush();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
outputStream.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} else {
// 注释①
// upload_url中传递的查询参数，如果定义的method为post请使用下面的代码，否则请删除或注释下面的代码块并使用注释②的代码
inputStream = new BufferedInputStream(fileItem.openStream());
byte[] bytes = new byte[inputStream.available()];
inputStream.read(bytes);
inputStream.close();
if (fieldName.equals("userid")) {
result.userid = new String(bytes, "UTF-8");
} else if (fieldName.equals("username")) {
result.username = new String(bytes, "UTF-8");
}
}
}
// 注释② upload_url中传递的查询参数，如果定义的method为get请使用下面注释的代码
/*
* result.userid = request.getParameter("userid"); result.username =
* request.getParameter("username");
*/
if (result.sourceUrl != null) {
result.sourceUrl += initParams;
}
result.success = true;
result.msg = "Success!";
/*
* To Do...可在此处处理储存事项
*/
// 返回图片的保存结果（返回内容为json字符串，可自行构造，该处使用fastjson构造）
// JSON.toJSONString(result);
}
}
}
消息处理类ResultMessage
import java.io.Serializable;
import java.util.ArrayList;
public class ResultMessage implements Serializable
{
/**
* @Fields serialVersionUID
*/
private static final long serialVersionUID = 1L;
/**
* 表示图片是否已上传成功。
*/
public Boolean success;
public String userid;
public String username;
/**
* 自定义的附加消息。
*/
public String msg;
/**
* 表示原始图片的保存地址。
*/
public String sourceUrl;
/**
* 表示所有头像图片的保存地址，该变量为一个数组。
*/
public ArrayList avatarUrls;
}
说明
newfullAvatarEditor(['*/FullAvatarEditor.swf',]['*/expressInstall.swf',] swfContainerID [,height] [,width], flashvars,[callback]);
*/FullAvatarEditor.swf 插件主swf文件的路径，文件名必须是FullAvatarEditor.swf */expressInstall.swf expressInstall.swf文件的路径，文件名必须是expressInstall.swf swfContainerID 用以包裹Flash的HTML元素的ID。 height Flash的高度，默认为600。 width Flash的宽度，默认为630。 flashvars 将要传递到flash 的 key/value 参数，请参见 配置参数。 callback flash执行某些操作时的回调函数，请参见回调函数。
小结： 插件兼容的浏览器挺多的，api操作简单。不错的。有用到的同学希望可以帮到。