Flex4/Flash多文件上传(带进度条)实例分享

<?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" minWidth="955" minHeight="600"
              backgroundColor="#333333" horizontalCenter="0" verticalCenter
              creationComplete="initApp()">
    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"));
            
            // 将文件过滤器装载如数组 递给MultiFileUpload
            public 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();  //播放音频文件
                
            }
            

        ]]>
    >
    
    
    s:Group horizontalCenter top="100"  width="708" height="408" s:BitmapImage source="@Embed('/assets/images/RasterizedItems.png')"   /> <!--背景图片-->
        s:SkinnableContainer ="638"="308" skinClass="skins.SkinnableContainer">
             s:layout>
                 s:VerticalLayout paddingLeft="15" paddingRight="23" paddingTop paddingBottom="23" />
             >
            数据列表-->
             s:DataGrid id="filesDG" requestedRowCount="4" rowHeight="40"   width="100%"="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:DataGrids:HGroup width="65%"进度条-->
                mx:ProgressBar 
                    ="progressbar"
                    width 
                    labelPlacement="right"
                    barSkin="skins.ProgressBar.CustomProgressSkin"
                    trackSkin="skins.ProgressBar.CustomProgressBarTrackSkin"
                    color="0xFFFFFF"
                    minimum 
                    visible="true"
                    maximum 
                    label="CurrentProgress 0%" 
                    direction
                    mode="manual" 
                    />
            s:HGroup按钮们-->
            gap="10"="10"s:Button ="browseBTN"="skins.buttonSkin4" label="浏览" fontFamily="微软雅黑"/>
                ="upload_btn"="skins.buttonSkin5"="上传"s:Button  ="delButton"="skins.buttonSkin6"="移除"="clearButton"="移除全部"s:SkinnableContainers:Group>
    
s:Application>

// 例子: // 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 { 倒入包 import components.GridHeaderRenderer; import components.GridItemRenderer; import flash.events.*; import flash.net.FileFilter; import flash.net.FileReference; import flash.net.FileReferenceList; import flash.net.URLRequest; import flash.net.URLVariables; import mx.collections.ArrayCollection; import mx.collections.ArrayList; import mx.controls.Alert; import mx.controls.ProgressBar; import mx.controls.ProgressBarMode; import mx.core.ClassFactory; import mx.events.CollectionEvent; import spark.components.Button; import spark.components.DataGrid; import spark.components.gridClasses.GridColumn; public class MultiFileUpload { UI 变量 private var _datagrid:DataGrid; var _browsebutton:Button; var _remselbutton:Button; var _remallbutton:Button; var _uploadbutton:Button; var _progressbar:ProgressBar; var _testButton:Button; DataGrid 列 var _nameColumn:GridColumn; var _typeColumn:GridColumn; var _sizeColumn:GridColumn; var _creationDate:GridColumn; var _modificationDate:GridColumn; var _progressColumn:GridColumn; var _columns:ArrayList; 文件参考变量 [Bindable] var _files:ArrayCollection; var _fileref:FileReferenceList FileReferenceList 类提供了让用户选择一个或多个要上载的文件的方法。 var _file:FileReference; FileReference 类提供了在用户计算机和服务器之间上载和下载文件的方法 var _uploadURL:URLRequest; var _totalbytes:Number; 文件过滤数组 var _filefilter:Array; 配置变量 var _url:String; 文件上传URL var _maxFileSize:Number; 允许上次的最大文件大小 单位字节 var _variables:URLVariables; 上传变量 类似 ?a=hello&b=world 构造器 function MultiFileUpload( 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(); 调用初始化话函数 } 初始化函数 function init():void{ 设置文件 ArrayCollection 和 文件处理变量 _files = new ArrayCollection(); _fileref = new FileReferenceList; _file = new FileReference; 设置总字节数 _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 = new GridColumn; _typeColumn = new GridColumn; _sizeColumn = new GridColumn; _nameColumn.dataField = "name"; _nameColumn.headerText= "文件"; _nameColumn.headerRenderer=new ClassFactory(GridHeaderRenderer); _typeColumn.dataField = "type"; _typeColumn.headerText = "类型"; _typeColumn.width = 80; _typeColumn.headerRenderer=new ClassFactory(GridHeaderRenderer); _sizeColumn.dataField = "size"; _sizeColumn.headerText = "文件大小"; _sizeColumn.labelFunction = bytesToKilobytes as Function; Label处理函数 _sizeColumn.width = 150; _sizeColumn.headerRenderer=new ClassFactory(GridHeaderRenderer); _columns = new ArrayList([_nameColumn,_typeColumn,_sizeColumn]); _datagrid.columns=_columns; _datagrid.sortableColumns = false; 排序 _datagrid.dataProvider = _files; 数据绑定 设置URL请求对象和地址 _uploadURL = new URLRequest; _uploadURL.url = _url; _uploadURL.method = "POST"; 设置请求方式 可以为POST和GET .. _uploadURL.data = _variables; 变量 _uploadURL.contentType = "multipart/form-data"; 请求类型声明 如果要上传二进制数据这个必须 } /******************************************************** * 私有方法 * ********************************************************/ 流量文件 多文件流量 function browseFiles(event:Event):void{ _fileref.browse(_filefilter); } 上传文件 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); } } 删除选定的文件 function removeSelectedFileFromCue(event:Event):if (_datagrid.selectedIndex >= 0){ _files.removeItemAt( _datagrid.selectedIndex); } } 删除全部文件 function clearFileCue(event:Event):void{ _nameColumn.itemRenderer=null; _typeColumn.itemRenderer=null; _sizeColumn.itemRenderer=null; _files.removeAll(); } 取消当前文件上传 function cancelFileIO(event:Event):void{ _file.cancel(); setupCancelButton(false); checkCue(); } 文件类型列 label处理函数 function bytesToKilobytes(data:Object,blank:Object):String { var kilobytes:String; kilobytes = String(Math.round(data.size/ 1024)) + ' kb'; return kilobytes } 设置进度条Labe值 function getByteCount():void{ var i: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没有文件限制设置 function checkFileSize(filesize:Number):Boolean{ var r:Boolean = false; if filesize greater then _maxFileSize if (filesize > _maxFileSize){ r = false; trace("false"); }else if (filesize <= _maxFileSize){ r = true; trace("true"); } if (_maxFileSize == 0){ r = true; } return r; } 重新设置进度条 function resetProgressBar():void{ _progressbar.label = ""; _progressbar.maximum = 0; _progressbar.minimum = 0; } reset form item elements 重置所有的元素 function resetForm():void{ _uploadbutton.enabled = false; _uploadbutton.addEventListener(MouseEvent.CLICK,uploadFiles); _uploadbutton.label = "上传"; _progressbar.maximum = 0; _totalbytes = 0; _progressbar.label = ""; _remselbutton.enabled = false; _browsebutton.enabled = true; } 每当_FILES的ArrayCollection改变这个函数被调用，以确保数据网格的数据的一致 function popDataGrid(event:CollectionEvent):void{ getByteCount(); checkCue(); } enable or disable upload and remove controls based on files in the cue; 启用上传和清楚按钮 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 上传按钮和取消按钮的切换 和功能的切换 function setupCancelButton(x:Boolean):if (x == true){ _uploadbutton.label = "取消"; _browsebutton.enabled = false; _remselbutton.enabled = false; _remallbutton.enabled = false; _uploadbutton.addEventListener(MouseEvent.CLICK,cancelFileIO); }false){ _uploadbutton.removeEventListener(MouseEvent.CLICK,cancelFileIO); resetForm(); } } ******************************************************** * File IO Event Handlers * *********************************************************/ called after user selected files form the browse dialouge box. 文件被选中后执行的响应函数 function selectHandler(event:Event):void { var i: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=new ClassFactory(GridItemRenderer); _typeColumn.itemRenderer=new ClassFactory(GridItemRenderer); _sizeColumn.itemRenderer=new ClassFactory(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; } } 文件被打开 上传之前的响应函数 function openHandler(event:Event):void{ trace('openHandler triggered'); _files; } 文件上传被上传的每个文件的过程中调用|我们用这个来养活进度条的数据 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上传|我们利用这一点来检查是否有任何文件留下来上传和如何处理它 上传完成 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); 把事件分配出去 } } function ioErrorHandler(event:IOErrorEvent):trace('And IO Error has occured:' + event); mx.controls.Alert.show(String(event),0); line-height:1.5!important">"ioError",0); } function securityErrorHandler(event:SecurityErrorEvent):void{ mx.controls.Alert.show(String(event),"Security Error",0); } function cancelHandler(event:Event):'cancelled'); } function httpStatusHandler(event:HTTPStatusEvent):if (event.status != 200){ mx.controls.Alert.show(String(event),0); line-height:1.5!important">"Error",0); } } } }