flex3.5 批量上传图片+预览
最近做个图片上传 用flex 预览 上传
项目用flex 3.5 SDK 但是要想上传前预览图片 切记flashPlayer要 10以上 （项目配置中有） 当然了 还有一些用JS获取文件路径 传给flex的办法但是个人感觉有点麻烦况且现在的大部分客户端 装的FLASH Player 版本都高于10 应该没有问题。
1。首先是图片预览列表用 TileList控件 itemRenderer指定渲染器（就是数据的展示样式） Photo.mxml代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="110" height="128" horizontalAlign="center"
verticalAlign="middle" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
[Bindable]
private var _file:FileReference;
protected function init():void
{ _file=data.file as FileReference;
_file.addEventListener(ProgressEvent.PROGRESS,pbProgress);
// _file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,complete);
}
private function pbProgress(event: ProgressEvent): void
{
pb.setProgress(event.bytesLoaded, event.bytesTotal);
}
private function complete(event: DataEvent): void
{
}
]]>
</mx:Script>
<mx:Image width="90" height="90" source="{data.file.data}" x="10" y="10"/>
<mx:Label text="{data.file.name}" width="90" x="10" y="108"/>
<mx:ProgressBar id="pb" verticalCenter="32" width="90" labelPlacement="center"
mode="manual" label="%3%%" minimum="0" maximum="100" textAlign="center"
x="10" height="10" fontSize="10" alpha="1.0" />
</mx:Module>
实现预览上传代码：uploadPic.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955"
minHeight="600" creationComplete="init()">
<mx:Script>
<![CDATA[
import com.pic.Photo;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.Image;
import mx.events.FlexEvent;
import mx.events.ListEvent;
import mx.events.ResizeEvent;
import mx.managers.PopUpManager;
private var file:FileReference; //要上传的文件
private var fileList:FileReferenceList; //选择图片的文件列表
private var isClosed:Boolean=false;//判断弹出的图片是否关闭
private var img:Image;//弹出的大图
private var imgList:ArrayCollection=new ArrayCollection();//待上传图片列表
private var j:int=0;//load回调函数次数
private var selecetedNum:int=-1;//被选中的序号
private var isUpload:Boolean=false;//是否已经上传
public function init():void{
fileList = new FileReferenceList(); //创建对象
fileList.addEventListener(Event.SELECT, onSelect);//选择 监听器
photoList.dataProvider=imgList;//图片预览
}
//---------------------------文件上传部分---------------------------------------------//
private function select(): void{
var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.png)", "*.jpg;*.jpeg;*.png");
var allTypes:Array = new Array(imageTypes);
fileList.browse(allTypes);//打开资源管理器时显示的类型
}
/**
* 选择文件事件回调函数
* */
private function onSelect(e: Event): void{
if(isUpload){
imgList.removeAll();//清空上传过的图片列表
photoList.itemRenderer=new ClassFactory(com.pic.Photo);//重新指定渲染器（重新NEW）
}
isUpload=false;//重置上传状态标识
j=0;//load回调函数的执行次数
for(var i:int=0;i<fileList.fileList.length;i++)
{
file=fileList.fileList[i] as FileReference;
//为每个FileReference添加监听器
file.addEventListener(Event.COMPLETE,completeHandle);
file.load();
}
}
/*
* load回调方法--要等到 fileList遍历完才一次性回调
*/
private function completeHandle(event:Event):void{
if(j==fileList.fileList.length-1&&!isUpload)
creatImgList();
j++;
}
private function creatImgList():void{//保存待上传图片到imgList列表
for(var i:int=0;i<fileList.fileList.length;i++)
{
file=fileList.fileList[i] as FileReference;
var obj:Object=new Object;
obj.file=file;
obj.describe="图片"+i+"描述";
imgList.addItem(obj);//添加到待图片列表
}
}
//----------------------------------图片弹出部分----------------------------------------//
protected function photoList_itemDoubleClickHandler(event:ListEvent):void
{
img = new Image();
// img.width = 300;
// img.height = 300;
img.maintainAspectRatio = true;
img.addEventListener(Event.COMPLETE, image_complete);
img.addEventListener(ResizeEvent.RESIZE, image_resize);
img.addEventListener(MouseEvent.CLICK, image_click);
img.source = event.itemRenderer.data.file.data;
img.setStyle("addedEffect", image_addedEffect);
img.setStyle("removedEffect", image_removedEffect);
isClosed=false;//是否关闭设置为false
PopUpManager.addPopUp(img, this, true);
}
private function image_click(evt:MouseEvent):void {
isClosed=true;//关闭显示的大图
PopUpManager.removePopUp(evt.currentTarget as Image);
}
private function image_resize(evt:ResizeEvent):void {
if(!isClosed){
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
}
private function image_complete(evt:Event):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
//---------------------------图片弹出部分结束----------------------------------------//
/*
*删除选中图片
*/
protected function deletePhoto():void
{
var array:Array=photoList.selectedIndices;
if(array.length>0){
array.sort(Array.NUMERIC);//按数字升序排序
for(var i:int=0;i<array.length;i++)
{
imgList.removeItemAt(array[i]-i);//从待上传列表中移出
}
photoName.text="";
photoSize.text="";
describe.text="";
}
}
/*
* 显示选中条目的详细信息
*/
protected function photoList_itemClickHandler(event:ListEvent):void
{
var isSelected:Boolean=photoList.isItemSelected(event.itemRenderer.data);
if(isSelected){
photoName.text=event.itemRenderer.data.file.name;//名称
photoSize.text=event.itemRenderer.data.file.size/1024+" KB";//大小
describe.text=event.itemRenderer.data.describe;//描述
selecetedNum=photoList.selectedIndex;//被选中的序号
if(photoList.selectedIndices.length>1)
{
describe.editable=false;//多选时描述不可编辑
}
else{
describe.editable=true;
}
}
}
/*
* 上传imgList中的图片
*/
protected function upload():void
{ if(isUpload){
Alert.show("列表中图片已经上传完毕，请重新选择！");
}else{
var k:int=0;
up();
function up():void//实现上传
{
file=imgList[k].file;
file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadComplete);
var request: URLRequest = new URLRequest("http://127.0.0.1:8080/FileUp/upload");//临时
file.upload(request);
}
/*
* 文件上传成功回调函数
*/
function uploadComplete(event: DataEvent): void
{
trace(k+"=="+imgList[k].describe);
trace(k+"--"+event.text);
k++;
if(k<imgList.length)
up();//调用上传
}
isUpload=true;//全部上传完后已上传标识=true
}
}
/*
* 描述改变回调函数
*/
protected function describe_changeHandler(event:Event):void
{
imgList[selecetedNum].describe=this.describe.text;//当前描述添加到列表中
}
]]>
</mx:Script>
<mx:WipeDown id="image_addedEffect" startDelay="100" />
<mx:Parallel id="image_removedEffect">
<mx:Zoom />
<mx:Fade />
</mx:Parallel>
<mx:TileList x="10" y="10" id="photoList"
columnCount="4" rowCount="3" borderThickness="9"
itemRenderer="com.pic.Photo"
allowMultipleSelection="true"
themeColor="#64BAF1"
itemDoubleClick="photoList_itemDoubleClickHandler(event)"
itemClick="photoList_itemClickHandler(event)"
width="456" height="431"></mx:TileList>
<mx:Grid x="491" y="34" width="295">
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="52" height="100%">
<mx:Label text="名称："/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:Label text="" id="photoName" width="229"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="54" height="100%">
<mx:Label text="大小："/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:Text text="" id="photoSize"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="46" height="100%">
<mx:Label text="描述："/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:TextArea height="62" width="100%" id="describe" change="describe_changeHandler(event)"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:Button x="491" y="340" label="选择上传图片" click="select()"/>
<mx:Button x="491" y="379" label="删除选中图片" click="deletePhoto()"/>
<mx:Button x="491" y="419" label="上传图片" click="upload()"/>
</mx:Application>
就这两块代码OK。有空再上份传源码