Flex多图片压缩上传
前段时间按照公司要求做了一个Flex多图片压缩上传组件，使网站实现了图片的快速上传与分享，提高了用户体验。
使用Flex4开发，Flex好像没有自带的多线程功能，因此借用了 开源项目async-threading实现多线程并发上传。
google code地址：http://code.google.com/p/async-threading/
要在flex4 sdk环境下使用，要先修改一下源代码，打开com.symantec.premiumServices.asyncThreading.handlers.FPSObserverHandler
将import mx.core.Application; 修改为import spark.components.Application;
将private var _appRef:Application = Application.applicationas Application;修改为private var _appRef:Application = FlexGlobals.topLevelApplication as Application;
同时导入import mx.core.FlexGlobals;
这个api要求自定义的线程继承AbstractAsyncThread然后实现IAsyncThreadResponder接口。
首先自定义一个 CommendThread.as
package common
{
import com.symantec.premiumServices.asyncThreading.abstract.AbstractAsyncThread;
import com.symantec.premiumServices.asyncThreading.interfaces.IAsyncThreadResponder;
public class CommendThread extends AbstractAsyncThread implements IAsyncThreadResponder
{
private var _f:Function;
public function CommendThread(f:Function)
{
this._f = f;
}
public function execute():void
{
_f.call();
this.kill();
}
}
}
定义图片组件 MyImage.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</fx:Script>
<s:Image width="100" height="100">
<s:creationComplete>
<![CDATA[
var img:Image = event.target as Image;
var file:FileReference = data as FileReference;
img.source = file.data;
]]>
</s:creationComplete>
</s:Image>
<s:Image x="84" y="0" width="16" height="15" source="@Embed('close_btn.png')">
<s:click>
<![CDATA[
parentDocument.valiUpload();
var file:FileReference = data as FileReference;
parentDocument.removeImageArray(file);
]]>
</s:click>
<s:mouseOver>
<![CDATA[
Mouse.cursor = MouseCursor.BUTTON;
]]>
</s:mouseOver>
<s:mouseOut>
<![CDATA[
Mouse.cursor = MouseCursor.ARROW;
]]>
</s:mouseOut>
</s:Image>
</s:ItemRenderer>
主文件 flexMultiUpload.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="700" height="450" minWidth="955" minHeight="600" initialize="init()">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.back
{
backgroundColor:#E7E7E7;
borderAlpha:0;
}
</fx:Style>
<fx:Script>
<![CDATA[
import common.CommendThread;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.graphics.codec.JPEGEncoder;
import mx.utils.StringUtil;
import spark.components.Image;
private var fileRef:FileReferenceList = new FileReferenceList();
[Bindable]
private var imageArray:ArrayCollection = new ArrayCollection;//图片数组
private var imageNameArray:ArrayCollection = new ArrayCollection;//上传图片名称数组
private var uploadURL:String = "http://www.leku.com/flex/flexuploadimage?";
private var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
private var isUploading:Boolean = false;
//初始化
public function init():void
{
//初始化图片上传的url
var url:String = this.parameters.url;
if(url != null && url.length>0)
{
uploadURL = decodeURI(this.parameters.url);
}
//初始化文件选择事件
fileRef.addEventListener(Event.SELECT,selectFileHandler);
fileRef.addEventListener(Event.COMPLETE,completeFileHandler);
}
public function valiUpload():void
{
if(isUploading)
{
Alert.show("正在上传中，请稍后操作。");
throw new Error("正在上传中，请稍后操作。");
}
}
//打开图片选择框
private function showSelectDialog():void
{
valiUpload();
fileRef.browse([
new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png")
]);
}
//图片选择完成后
private function selectFileHandler(e:Event):void
{
for each (var file:FileReference in fileRef.fileList)
{
if(imageNameArray.contains(file.name))
{
continue;
}
file.load();
file.addEventListener(Event.COMPLETE,completeFileHandler);
}
uploadButton.visible = true;
}
//图片加载完成后
private function completeFileHandler(e:Event):void
{
var file:FileReference = e.target as FileReference;
insertImageArray(file);
}
//图片数组增加元素
private function insertImageArray(file:FileReference):void
{
imageArray.addItem(file);
imageNameArray.addItem(file.name);
}
//删除图片数组元素
public function removeImageArray(file:FileReference):void
{
var index:Number = imageArray.getItemIndex(file);
if(index >= 0)
{
imageArray.removeItemAt(index);
}
index = imageNameArray.getItemIndex(file.name);
if(index >= 0)
{
imageNameArray.removeItemAt(index);
}
}
private var value:Number = 0;
private var total:Number = 0;
private var index:Number = 0;
private var maxSize:Number = 1024;//设置图片压缩尺寸
//上传图片
private function upload():void
{
if(imageArray.length <= 0)
{
Alert.show("请选择图片");
return;
}
valiUpload();
isUploading = true;
value = 0;
total = imageArray.length;
progressBar.visible = true;
progressBar.setProgress(value,total);
for each (var file:FileReference in imageArray)
{
uploading(file);
}
}
private function uploading(file:FileReference):void
{
new CommendThread(function():void
{
var fileName:String = file.name;
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function():void
{
var bm:Bitmap=loader.content as Bitmap;
var bmd:BitmapData;
if((bm.width>=bm.height)&&bm.width>maxSize)
{
var rateW:Number=maxSize/bm.width;
var h:Number=rateW*bm.height;
bmd=new BitmapData(maxSize,h,true,0);
bmd.draw(bm.bitmapData,new Matrix(rateW,0,0,rateW),null,null,null,true);
bm=new Bitmap(bmd,PixelSnapping.ALWAYS,true);
bmd = bm.bitmapData;
}
else if(bm.height>bm.width&&bm.height>maxSize)
{
var rateH:Number=maxSize/bm.height;
var w:Number=rateH*bm.width;
bmd=new BitmapData(w,maxSize,true,0);
bmd.draw(bm.bitmapData,new Matrix(rateH,0,0,rateH),null,null,null,true);
bm=new Bitmap(bmd,PixelSnapping.ALWAYS,true);
bmd = bm.bitmapData;
}
else
{
bmd = bm.bitmapData;
}
var urlLoader:URLLoader = new URLLoader();
var jpeg:JPEGEncoder = new JPEGEncoder(80);
var b:ByteArray = jpeg.encode(bmd);
var subRequest:URLRequest = new URLRequest();
subRequest.method = URLRequestMethod.POST;
subRequest.requestHeaders.push(header);
subRequest.url = uploadURL+"&fileName="+encodeURI(fileName==null?"":fileName);//url编码，不然汉字会乱码
subRequest.data = b;
urlLoader.load(subRequest);
urlLoader.addEventListener(Event.COMPLETE,function(e:Event):void{
progressBar.setProgress(++value,total);
ExternalInterface.call("flexCallBack",urlLoader.data);
if(value == total)
{
imageArray.removeAll();
imageNameArray.removeAll();
value = 0;
total = 0;
progressBar.visible = false;
ExternalInterface.call("flexCompleteCallBack");
isUploading = false;
}
// System.gc();
});
});
loader.loadBytes(file.data);
}).start();
}
]]>
</fx:Script>
<s:VGroup x="0" y="0" width="700" height="450" gap="0">
<s:HGroup width="700" height="400" gap="0">
<s:Scroller>
<s:DataGroup width="684" height="400" dataProvider="{imageArray}"
focusColor="#EE7091" itemRenderer="mycomponent.MyImage">
<s:layout>
<s:TileLayout useVirtualLayout="true" requestedColumnCount="6">
</s:TileLayout>
</s:layout>
</s:DataGroup>
</s:Scroller>
</s:HGroup>
<s:BorderContainer width="700" height="50" styleName="back">
<s:Button x="210" y="8" width="116" height="35" label="选择图片" click="showSelectDialog()">
<s:mouseOver>
<![CDATA[
Mouse.cursor = MouseCursor.BUTTON;
]]>
</s:mouseOver>
<s:mouseOut>
<![CDATA[
Mouse.cursor = MouseCursor.ARROW;
]]>
</s:mouseOut>
</s:Button>
<s:Button x="370" y="8" width="116" height="35" label="图片上传" click="upload()" id="uploadButton" visible="false">
<s:mouseOver>
<![CDATA[
Mouse.cursor = MouseCursor.BUTTON;
]]>
</s:mouseOver>
<s:mouseOut>
<![CDATA[
Mouse.cursor = MouseCursor.ARROW;
]]>
</s:mouseOut>
</s:Button>
</s:BorderContainer>
</s:VGroup>
<mx:ProgressBar x="150" y="200" width="400" id="progressBar" mode="manual" labelPlacement="center" label="%1 of %2,总进度:%3%%" visible="false">
</mx:ProgressBar>
</s:Application>
以下是工程结构
这是close_btn.png的图片： 
接下来就是要导出swf文件了，如果方式不对的话，会导致文件很大，从何造成网页组件加载很慢。
我是用的是flash builder开发，流程如下
右键点击工程-->选择Properties -->选择 Flex Build Path-->选择RSL选择，这样编译的时候只会加载使用到的类库，大大
降低swf文件大小-->点击OK
点击Export Release Build
选择工程，然后点击finish,完成后在bin-release目录下找到flexMultiUpload.swf
可以使用浏览器直接打开，或者flash客户端（尽量把flash更新到最新版本）
服务端使用java struts2
import java.io.File;
import java.io.InputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import com.opensymphony.xwork2.ActionSupport;
public class FlexAction extends ActionSupport{
/**
*
*/
private static final long serialVersionUID = -3543364166243030722L;
private HttpServletRequest request = ServletActionContext.getRequest();
private HttpServletResponse response = ServletActionContext.getResponse();
public static final Integer MAX_SIZE = 1024*1024*2;//允许图片最大尺寸
private String fileName;
@Action(value = "flexuploadimage")
public String upload() throws Exception{
InputStream inputStream = request.getInputStream();
int formlength = request.getContentLength();
//如果图片大于允许的值
if(formlength > MAX_SIZE){
//返回异常信息
response.getOutputStream().println("自定义返回信息，或者跳转到异常页面");
return null;
}
byte[] formcontent = new byte[formlength];
int totalread = 0;
int nowread = 0;
while (totalread < formlength) {
nowread = inputStream.read(formcontent, totalread, formlength);
totalread += nowread;
}
//将图片写入本地或者图片服务器
File file = new File("D:/flex", fileName);
FileUtils.writeByteArrayToFile(file, formcontent);
return null;
}
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
}
jsp页面调用
<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
request.setAttribute("url", URLEncoder.encode("上传路径", "utf-8"));
%>
<div style="height:600px;width:800px;display:table-cell;vertical-align:middle;text-align:center;">
<embed src="flexMultiUpload.swf" style="height:450px;width:700px;border: #C9DDEA solid 1px;vertical-align: middle;" flashVars="url=${url }" allowScriptAccess="always">
<br/>
<div style="margin-left: -450px;margin-top: 10px;">
<span>如果不能正常使用，请将Flash升级到最新版本。</span>
</div>
</div>
组件缺陷（由于本文作者偷懒的结果，哈哈）：
每一个图片新开一个线程并发上传，如果用户一次性上传的图片过多，可能会造成客户端挂掉的现象。
解决办法：（1）限制每次上传的图片数量
（2）做一个上传队列，几个线程并发执行队列中的任务（可以参考QQ空间相册普通上传功能，注意：不是极速上传）。
（3）flex的多线程是借助于第三方的