要求

• 必备知识

  本文要求基本了解 Adobe Flex编程知识和JAVA基础知识。

• 开发环境

  MyEclipse10/Flash Builder4.6/Flash Player11及以上

• 演示地址

  演示地址 资料下载

FLASH文件上传和传统的HTML文件上传，能实现多文件上传、大文件上传，和上传前预览。

当然HTML5也能实现上述功能，这里就不多说了，有时间我在做一个实例和大家分享一下。

下面介绍一下 百度图片 基于FLASH文件上传工具截图:

MultiFile Upload 上传插件介绍:

官方DEMO:

下面是对MultiFile Upload 插件的UI自定义和代码的翻译:

界面:

自定义UI组件:  FlashFileUpload.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/mx"minWidth="955"minHeight="600"backgroundColor="#333333"horizontalCenter="0"verticalCenter="0"creationComplete="initApp()"><fx:Declarations></fx:Declarations><fx:Script><![CDATA[import com.newmediateam.fileIO.MultiFileUpload;import flash.media.Sound;import flash.media.SoundChannel;import flash.net.FileFilter;import flash.net.URLVariables;import mx.controls.Alert;import mx.core.SoundAsset;public var multiFileUpload:MultiFileUpload;// 传送完成音乐[Embed(source="assets/audio/Ding.mp3")]public var soundClass:Class;public var snd:SoundAsset = new soundClass() as SoundAsset;public var sndChannel:SoundChannel;// 设置文件过滤器public var imageTypes:FileFilter = new FileFilter("Images (*.jpg; *.jpeg; *.gif; *.png)" ,"*.jpg; *.jpeg; *.gif; *.png");public var videoTypes:FileFilter = new FileFilter("Flash Video Files (*.flv)","*.flv");public var documentTypes:FileFilter = new FileFilter("Documents (*.pdf), (*.doc), (*.rtf), (*.txt)",("*.pdf; *.doc; *.rtf, *.txt"));// 将文件过滤器装载如数组 递给MultiFileUploadpublic var filesToFilter:Array = new Array(imageTypes,videoTypes,documentTypes);public var uploadDestination:String = "http://www.li-cheng.cn";  // 修改服务端上传控制器public function initApp():void{var postVariables:URLVariables = new URLVariables;postVariables.projectID = 55;postVariables.test ="Hello World";    multiFileUpload = new MultiFileUpload(filesDG,browseBTN,clearButton,delButton,upload_btn,progressbar,uploadDestination,postVariables,11534336,filesToFilter);multiFileUpload.addEventListener(Event.COMPLETE,uploadsfinished);  //事件有分配}public function uploadsfinished(event:Event):void{sndChannel=snd.play();  //播放音频文件}]]></fx:Script><s:GrouphorizontalCenter="0"top="100"width="708"height="408" ><s:BitmapImagesource="@Embed('/assets/images/RasterizedItems.png')"   /> <!--背景图片--><s:SkinnableContainerhorizontalCenter="0"verticalCenter="0"width="638"height="308"skinClass="skins.SkinnableContainer"><s:layout><s:VerticalLayoutpaddingLeft="15"paddingRight="23"paddingTop="15"paddingBottom="23" /></s:layout><!--数据列表--><s:DataGridid="filesDG"requestedRowCount="4"rowHeight="40"width="100%"height="200"skinClass="skins.DG" ><!--<s:columns><s:ArrayList><s:GridColumn dataField="a" headerText="#" headerRenderer="components.GridHeaderRenderer"  itemRenderer="components.GridItemRenderer"></s:GridColumn><s:GridColumn dataField="b" headerText="歌曲" headerRenderer="components.GridHeaderRenderer"  itemRenderer="components.GridItemRenderer"></s:GridColumn></s:ArrayList></s:columns>--></s:DataGrid><s:HGroupwidth="65%"><!--进度条--><mx:ProgressBarid="progressbar"width="100%"labelPlacement="right"barSkin="skins.ProgressBar.CustomProgressSkin"trackSkin="skins.ProgressBar.CustomProgressBarTrackSkin"color="0xFFFFFF"minimum="0"visible="true"maximum="100"label="CurrentProgress 0%"direction="right"mode="manual" /></s:HGroup><!--按钮们--><s:HGroupgap="10"paddingTop="10"><s:Buttonid="browseBTN"skinClass="skins.buttonSkin4"label="浏览"fontFamily="微软雅黑"/><s:Buttonid="upload_btn"skinClass="skins.buttonSkin5"label="上传"fontFamily="微软雅黑"/><s:Buttonid="delButton"skinClass="skins.buttonSkin6"label="移除"fontFamily="微软雅黑"/><s:Buttonid="clearButton"skinClass="skins.buttonSkin6"label="移除全部"fontFamily="微软雅黑"/></s:HGroup></s:SkinnableContainer></s:Group></s:Application>

主程序代码:  MultiFileUpload.as

//例子://multiFileUpload = new MultiFileUpload(//filesDG,    DataGrid组件//browseBTN, 浏览按钮//clearButton, 清楚全部//delButton,     清楚选中//upload_btn,     上传按钮//progressbar,  进度条//"http://[Your Server Here]/MultiFileUpload/upload.cfm",   上传地址 控制器//postVariables,  上传参数//350000,         最大文件大小      0 （零）值=没有文件限制//filesToFilter     文件过滤数组//);
package com.newmediateam.fileIO {//倒入包importcomponents.GridHeaderRenderer;importcomponents.GridItemRenderer;import flash.events.*;importflash.net.FileFilter;importflash.net.FileReference;importflash.net.FileReferenceList;importflash.net.URLRequest;importflash.net.URLVariables;importmx.collections.ArrayCollection;importmx.collections.ArrayList;importmx.controls.Alert;importmx.controls.ProgressBar;importmx.controls.ProgressBarMode;importmx.core.ClassFactory;importmx.events.CollectionEvent;importspark.components.Button;importspark.components.DataGrid;importspark.components.gridClasses.GridColumn;public classMultiFileUpload {//UI 变量private var_datagrid:DataGrid;private var_browsebutton:Button;private var_remselbutton:Button;private var_remallbutton:Button;private var_uploadbutton:Button;private var_progressbar:ProgressBar;private var_testButton:Button;//DataGrid 列private var_nameColumn:GridColumn;private var_typeColumn:GridColumn;private var_sizeColumn:GridColumn;private var_creationDate:GridColumn;private var_modificationDate:GridColumn;private var_progressColumn:GridColumn;private var_columns:ArrayList;//文件参考变量[Bindable]private var_files:ArrayCollection;private var _fileref:FileReferenceList  //FileReferenceList 类提供了让用户选择一个或多个要上载的文件的方法。private var _file:FileReference;  //FileReference 类提供了在用户计算机和服务器之间上载和下载文件的方法private var_uploadURL:URLRequest;private var  _totalbytes:Number;//文件过滤数组private var_filefilter:Array;//配置变量private var _url:String; //文件上传URLprivate var _maxFileSize:Number; //允许上次的最大文件大小 单位字节private var _variables:URLVariables; //上传变量 类似 ?a=hello&b=world//构造器public functionMultiFileUpload(dataGrid:DataGrid,browseButton:Button,removeAllButton:Button,removeSelectedButton:Button,uploadButton:Button,progressBar:ProgressBar,url:String,variables:URLVariables,maxFileSize:Number,filter:Array){_datagrid=dataGrid;_browsebutton=browseButton;_remallbutton=removeAllButton;_remselbutton=removeSelectedButton;            _uploadbutton=uploadButton;_url=url;_progressbar=progressBar;_variables=variables;_maxFileSize=maxFileSize;_filefilter=filter;init();//调用初始化话函数
}//初始化函数private function init():void{//设置文件 ArrayCollection 和  文件处理变量_files = newArrayCollection();_fileref= newFileReferenceList;_file= newFileReference;//设置总字节数_totalbytes = 0;//给UI组件监听事件
_browsebutton.addEventListener(MouseEvent.CLICK, browseFiles);_uploadbutton.addEventListener(MouseEvent.CLICK,uploadFiles);_remallbutton.addEventListener(MouseEvent.CLICK,clearFileCue);_remselbutton.addEventListener(MouseEvent.CLICK,removeSelectedFileFromCue);_fileref.addEventListener(Event.SELECT, selectHandler);_files.addEventListener(CollectionEvent.COLLECTION_CHANGE,popDataGrid);//集合数据变化是监听此函数//设置进度条参数_progressbar.mode = "manual"; //指定用于更新进度栏的方法。_progressbar.label = "";//设置按钮组件_uploadbutton.enabled = false;_remselbutton.enabled= false;_remallbutton.enabled= false;//设置 DataGrid 控件_nameColumn = newGridColumn;_typeColumn= newGridColumn;_sizeColumn= newGridColumn;_nameColumn.dataField= "name";_nameColumn.headerText= "文件";_nameColumn.headerRenderer=newClassFactory(GridHeaderRenderer);_typeColumn.dataField= "type";_typeColumn.headerText= "类型";_typeColumn.width= 80;_typeColumn.headerRenderer=newClassFactory(GridHeaderRenderer);_sizeColumn.dataField= "size";_sizeColumn.headerText= "文件大小";_sizeColumn.labelFunction= bytesToKilobytes as Function; //Label处理函数_sizeColumn.width = 150;_sizeColumn.headerRenderer=newClassFactory(GridHeaderRenderer);_columns= newArrayList([_nameColumn,_typeColumn,_sizeColumn]);_datagrid.columns=_columns;_datagrid.sortableColumns= false; //排序_datagrid.dataProvider = _files;  //数据绑定//设置URL请求对象和地址_uploadURL = newURLRequest;_uploadURL.url=_url;_uploadURL.method= "POST";  //设置请求方式     可以为POST和GET  ..
_uploadURL.data= _variables; //变量_uploadURL.contentType = "multipart/form-data"; //请求类型声明 如果要上传二进制数据这个必须
}/*********************************************************     私有方法                                                                                               *********************************************************///流量文件  多文件流量private function browseFiles(event:Event):void{                    _fileref.browse(_filefilter);               }//上传文件private function uploadFiles(event:Event):void{if (_files.length > 0){_file= FileReference(_files.getItemAt(0));    _file.addEventListener(Event.OPEN, openHandler);//前置操作
_file.addEventListener(ProgressEvent.PROGRESS, progressHandler);_file.addEventListener(Event.COMPLETE, completeHandler);_file.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler);//当对 FileReference.upload() 或 FileReference.download() 方法的调用尝试将文件上载到调用方安全沙箱外部的服务器，或是从调用方安全沙箱外部的服务器上下载文件时进行调度。_file.addEventListener(HTTPStatusEvent.HTTP_STATUS,httpStatusHandler);//当上载失败并且存在可用来描述失败的 HTTP 状态代码时调度。_file.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);//当上载或下载失败时调度。
_file.upload(_uploadURL);setupCancelButton(true);}}//删除选定的文件private function removeSelectedFileFromCue(event:Event):void{if (_datagrid.selectedIndex >= 0){_files.removeItemAt( _datagrid.selectedIndex);}}//删除全部文件private function clearFileCue(event:Event):void{_nameColumn.itemRenderer=null;_typeColumn.itemRenderer=null;_sizeColumn.itemRenderer=null;_files.removeAll();}//取消当前文件上传private function cancelFileIO(event:Event):void{_file.cancel();setupCancelButton(false);checkCue();}//文件类型列  label处理函数private function bytesToKilobytes(data:Object,blank:Object):String {varkilobytes:String;kilobytes= String(Math.round(data.size/ 1024)) + ' kb';returnkilobytes}//设置进度条Labe值private function getByteCount():void{vari:int;_totalbytes= 0;for(i=0;i < _files.length;i++){_totalbytes+=_files[i].size;}_progressbar.label= "文件: "+  _files.length+ "大小: " + Math.round(_totalbytes/1024) + " kb"
}//检查文件不超过maxFileSize为|如果_maxFileSize == 0没有文件限制设置private function checkFileSize(filesize:Number):Boolean{var r:Boolean = false;//if  filesize greater then _maxFileSizeif (filesize >_maxFileSize){r= false;trace("false");}else if (filesize <=_maxFileSize){r= true;trace("true");}if (_maxFileSize == 0){r= true;}returnr;}//重新设置进度条private function resetProgressBar():void{_progressbar.label= "";_progressbar.maximum= 0;_progressbar.minimum= 0;}//reset form item elements 重置所有的元素private function resetForm():void{_uploadbutton.enabled= false;_uploadbutton.addEventListener(MouseEvent.CLICK,uploadFiles);_uploadbutton.label= "上传";_progressbar.maximum= 0;_totalbytes= 0;_progressbar.label= "";_remselbutton.enabled= false;_remallbutton.enabled= false;_browsebutton.enabled= true;}//每当_FILES的ArrayCollection改变这个函数被调用，以确保数据网格的数据的一致private function popDataGrid(event:CollectionEvent):void{                getByteCount();checkCue();}//enable or disable upload and remove controls based on files in the cue;//启用上传和清楚按钮private function checkCue():void{if (_files.length > 0){_uploadbutton.enabled= true;_remselbutton.enabled= true;_remallbutton.enabled= true;            }else{resetProgressBar();_uploadbutton.enabled= false;     }    }//toggle upload button label and function to trigger file uploading or upload cancelling//上传按钮和取消按钮的切换 和功能的切换private function setupCancelButton(x:Boolean):void{if (x == true){_uploadbutton.label= "取消";_browsebutton.enabled= false;_remselbutton.enabled= false;_remallbutton.enabled= false;_uploadbutton.addEventListener(MouseEvent.CLICK,cancelFileIO);        }else if (x == false){_uploadbutton.removeEventListener(MouseEvent.CLICK,cancelFileIO);resetForm();}}/**********************************************************  File IO Event Handlers                                **********************************************************///called after user selected files form the browse dialouge box.//文件被选中后执行的响应函数private function selectHandler(event:Event):void{vari:int;var msg:String ="";var dl:Array =[];for (i=0;i < event.currentTarget.fileList.length; i ++){if(checkFileSize(event.currentTarget.fileList[i].size)){_files.addItem(event.currentTarget.fileList[i]);trace("under size " +event.currentTarget.fileList[i].size);}else{dl.push(event.currentTarget.fileList[i]);trace(event.currentTarget.fileList[i].name+ " too large");}_nameColumn.itemRenderer=newClassFactory(GridItemRenderer);_typeColumn.itemRenderer=newClassFactory(GridItemRenderer);_sizeColumn.itemRenderer=newClassFactory(GridItemRenderer);_sizeColumn.labelFunction= bytesToKilobytes as Function; //Label处理函数
}if (dl.length > 0){for (i=0;i<dl.length;i++){msg+= String(dl[i].name + " 文件过大. \n");}mx.controls.Alert.show(msg+ "文件最大为: " + Math.round(_maxFileSize / 1024) + " kb","文件过大",4,null).clipContent;}        }//文件被打开  上传之前的响应函数private function openHandler(event:Event):void{trace('openHandler triggered');_files;}//文件上传被上传的每个文件的过程中调用|我们用这个来养活进度条的数据private function progressHandler(event:ProgressEvent):void{        _progressbar.setProgress(event.bytesLoaded,event.bytesTotal);//设置进度条的状态_progressbar.label = "Uploading " + Math.round(event.bytesLoaded / 1024) + " kb of " + Math.round(event.bytesTotal / 1024) + " kb " + (_files.length - 1) + "剩余";}//所谓的后一个文件已被successully上传|我们利用这一点来检查是否有任何文件留下来上传和如何处理它//上传完成private function completeHandler(event:Event):void{_files.removeItemAt(0); //移除集合中的第0号元素if (_files.length > 0){_totalbytes= 0;uploadFiles(null);}else{setupCancelButton(false);_progressbar.label= "上传完成";var uploadCompleted:Event = new Event(Event.COMPLETE);  //完成时创建一个事件
dispatchEvent(uploadCompleted);//把事件分配出去
}}private function ioErrorHandler(event:IOErrorEvent):void{//trace('And IO Error has occured:' +  event);mx.controls.Alert.show(String(event),"ioError",0);}private function securityErrorHandler(event:SecurityErrorEvent):void{mx.controls.Alert.show(String(event),"Security Error",0);}private function cancelHandler(event:Event):void{trace('cancelled');}private function httpStatusHandler(event:HTTPStatusEvent):void{if (event.status != 200){mx.controls.Alert.show(String(event),"Error",0);}}}
}

演示地址： http://www.li-cheng.cn/demo/FlashFileUpload/FlashFileUpload.html

资料下载:    http://pan.baidu.com/share/link?shareid=1217875474&uk=1545675865

作者:Li-Cheng

出处:http://www.cnblogs.com/Li-Cheng/p/3585668.html

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。