上传编辑头像

来源：互联网发布：淘宝收件人名字大全编辑：程序博客网时间：2024/05/29 11:45

今天给大家介绍一款强大的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();}}@Overrideprotected 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.jpgString 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 blocke1.printStackTrace();}try {outputStream = new BufferedOutputStream(new FileOutputStream(getServletContext().getRealPath("/")+ virtualPath.replace("/", "\\")));} catch (FileNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();}try {Streams.copy(inputStream, outputStream, true);} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}try {inputStream.close();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}try {outputStream.flush();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}try {outputStream.close();} catch (IOException e) {// TODO Auto-generated catch blocke.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.swfswfContainerID        用以包裹Flash的HTML元素的ID。height             Flash的高度，默认为600。width           Flash的宽度，默认为630。flashvars        将要传递到flash 的 key/value 参数，请参见 配置参数。callback         flash执行某些操作时的回调函数，请参见回调函数。

小结：插件兼容的浏览器挺多的，api操作简单。不错的。有用到的同学希望可以帮到。

1 1