首页 »Flash教程 » flex自定义组件:使用FLEX进行多文件上传和自定义上传信息 »正文
flex自定义组件:使用FLEX进行多文件上传和自定义上传信息
来源: 发布时间:星期五, 2009年1月23日 浏览:221次 评论:0
在Web应用中上传文件是比较常见 需求 在这里通过 个实际应用向大家介绍 下在Flex下如何进行多文件上传 并在上传文件 同时提供 些自定义描述信息以便数据逻辑处理 功能需求 首先通过以下界面了解 下需求: 主要功能包括: 1)允许添加多个上传 文件 2)自定义文件标题 3)可以对没上传 或正在上传 文件删除 4)上传过程把窗体隐藏在后台 不影响用户 其他 操作(这个就很简单 把窗体隐藏起来在主界面显示个上进工作按钮就可以了 需要 时候再点击 下查看进度) 定义文件上下传类 packageCodes { importHFSoftFx.HFSoftCoreFun; importflash.events.DataEvent; importflash.events.ProgressEvent; importflash.net.FileReference; importflash.net.URLRequest; publicdynamicUploadFile { publicvarDEFAULT:=0; publicvarLOADING:=1; publicvarCOMPLETE:=2; publicfunctionUploadFile { } privatevarmState:=DEFAULT; publicfunctiongetState: { mState; } privatevarmName:String; publicfunctiongetName:String { mName; } publicfunction Name(value:String):void { mName=value; } privatevarmSize:; publicfunctiongetSize: { mSize; } publicfunctionSize(value:):void { mSize=value; } privatevarmLoadSize:; publicfunctiongetLoadSize: { mLoadSize; } publicfunctionLoadSize(value:):void{ mLoadSize=value; } privatevarmFileRef:FileReference; publicfunctiongetFileRef:FileReference { mFileRef; } publicfunctionFileRef(value:FileReference):void { mFileRef=value; } publicfunctionUpload(request:URLRequest,complete:Function=null, progress:Function=null):void{ FileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, function(event:DataEvent){ varstr:String= event.data.substr(1,event.data.length-1); varx:XML=XML(str); (x.Exception!=''&&x.Exception!=null) { HFSoftCoreFun.AlertError(x.Exception); } { mState=COMPLETE; (complete!=null) complete; } }); FileRef.addEventListener(ProgressEvent.PROGRESS ,function(event:ProgressEvent){ LoadSize=event.sLoaded; Size=event.sTotal; (progress!=null) progress; }); mState=LOADING; FileRef.upload(request); } } }
类并不复杂只是定义了 些简单 成员 为什么要把类定义成动态呢 主要是为了方便扩展 些属性成员 这个类 主要思路方法就是 publicfunctionUpload(request:URLRequest,complete:Function=null, progress:Function=null):void{ FileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, function(event:DataEvent){ varstr:String= event.data.substr(1,event.data.length-1); varx:XML=XML(str); (x.Exception!=''&&x.Exception!=null) { HFSoftCoreFun.AlertError(x.Exception); } { mState=COMPLETE; (complete!=null) complete; } }); FileRef.addEventListener(ProgressEvent.PROGRESS ,function(event:ProgressEvent){ LoadSize=event.sLoaded; Size=event.sTotal; (progress!=null) progress; }); mState=LOADING; FileRef.upload(request); } 参数request是定义接收文件 URLRequest
参数complete和progress分别是上传成功和上传进度回调思路方法 窗体代码 <?xmlversion="1.0"encoding="utf-8"?> <mx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"width="628"height="300"title="上传文件"showCloseButton="true"xmlns:net="flash.net.*"> <mx:close> <![CDATA[ OnWorkingChange; PopUpManager.removePopUp(this); ]]> </mx:close> <mx:Canvaswidth="100%"height="100%"> <mx:VBoxleft="10"right="20"verticalAlign="middle"horizontalAlign="center"> <mx:Repeater dataProvider="{mUploadFiles}"id="rp"width="100%"height="100%"> <mx:HBoxdata="{rp.currentItem}" verticalAlign="middle"height="26"horizontalAlign="center"> <mx:render> <![CDATA[ varhb:HBox=HBox(event.target); varpb:ProgressBar=ProgressBar(hb.getChildByName("pb1")); varuf:UploadFile=UploadFile(hb.data); pb.Progress(uf.LoadSize,uf.Size); ]]> </mx:render> <mx:Button visible="{rp.currentItem.State!=UploadFile.COMPLETE}"data="{rp.currentIndex}"icon="@Embed(source='http://www.cnblogs.com/Imanges/delete16.png')"width="28"> <mx:click> <![CDATA[ DeleteUploadItem((event.target.data)); ]]> </mx:click> </mx:Button> <mx:Label width="180"text="{rp.currentItem.Name}"/> <mx:TextInputdata="{rp.currentItem}"text="{rp.currentItem.Title}"width="206"> <mx:change> <![CDATA[ event.target.data.Title=event.target.text; ]]> </mx:change> </mx:TextInput> <mx:ProgressBar id="pb1" labelPlacement="center" mode="manual" width="106"fontWeight="normal"/> </mx:HBox> <mx:HRulewidth="100%"/> </mx:Repeater> </mx:VBox> </mx:Canvas> <mx:ControlBarhorizontalAlign="right"verticalAlign="middle"> <mx:Buttonlabel="上传"> <mx:click> <![CDATA[ Upload_File; ]]> </mx:click> </mx:Button> <mx:Buttonlabel="确定"> <mx:click> <![CDATA[ OnWorkingChange; PopUpManager.removePopUp(this); ]]> </mx:click> </mx:Button> </mx:ControlBar> <mx:initialize> <![CDATA[ My=this; ]]> </mx:initialize> <mx:Script> <![CDATA[ importCodes.PopUpEffect; importmx.core.IFlexDisplayObject; importmx.managers.PopUpManager; importmx.controls.ProgressBar; importCodes.UploadFile; importCodes.SysConfig; importflash.net.URLRequest; importCodes.Untity; importflash.net.URLVariables; importflash.net.FileReference; importHFSoftFx.HFSoftCoreFun; privatevarMy:IFlexDisplayObject; [Bindable] privatevarmUploadFiles:Array=Array; privatevarervalId:u; publicvarWorkingChange:Function; privatefunctionOnWorkingChange:void{ (WorkingChange!=null) WorkingChange; } publicfunctiongetUploadFiles:Array { mUploadFiles; } privatefunctionDeleteUploadItem(index:) { varitem:UploadFile =UploadFile(mUploadFiles[index]); item.FileRef.cancel; mUploadFiles.splice(index,1); OnWorkingChange; rp.executeBindings(true); (mUploadFiles.length0) PopUpEffect.Hide(My); } publicfunctionUpload_File:void{ varitem:UploadFile =UploadFile(mUploadFiles[0]); varrequest:URLRequest=Untity.GetUploadFileRequest; varvariables:URLVariables= URLVariables; variables.Title=item.Title; variables.FolderID=item.FolderID; request.data=variables; item.Upload(request,function{ DeleteUploadItem(0); (mUploadFiles.length>0) ervalId=flash.utils.Interval(function{ flash.utils.clearInterval(ervalId); Upload_File; },500,null); },function{ rp.executeBindings(true); }); } publicfunctionAddItem(files:FileReferenceList,folderid:):void{ varitem:UploadFile; var fr:FileReference; for(vari:u=0;i<files.fileList.length;i){ fr=FileReference(files.fileList[i]); (fr.size>SysConfig.ImageMaxSize) { HFSoftCoreFun.AlertError(fr.name+"文件大于"+(SysConfig.ResourceFileMaxSize/1024)+"(KB)"); ; } item=UploadFile; item.FileRef=fr; item.FolderID=folderid; item.Title=fr.name; item.Name=fr.name; item.Size=fr.size; mUploadFiles.push(item); } rp.executeBindings(true); } ]]> </mx:Script> </mx:TitleWindow>
窗体有两个主要思路方法: 通过FileReferenceList把选择 文件添加到窗体列中 publicfunctionAddItem(files:FileReferenceList,folderid:):void{ varitem:UploadFile; var fr:FileReference; for(vari:u=0;i<files.fileList.length;i){ fr=FileReference(files.fileList[i]); (fr.size>SysConfig.ImageMaxSize) { HFSoftCoreFun.AlertError(fr.name+"文件大于"+(SysConfig.ResourceFileMaxSize/1024)+"(KB)"); ; } item=UploadFile; item.FileRef=fr; item.FolderID=folderid; item.Title=fr.name; item.Name=fr.name; item.Size=fr.size; mUploadFiles.push(item); } rp.executeBindings(true); } 对列表文件进行上传 更新窗体内容 publicfunctionUpload_File:void{ varitem:UploadFile =UploadFile(mUploadFiles[0]); varrequest:URLRequest=Untity.GetUploadFileRequest; varvariables:URLVariables= URLVariables; variables.Title=item.Title; variables.FolderID=item.FolderID; request.data=variables; item.Upload(request,function{ DeleteUploadItem(0); (mUploadFiles.length>0) ervalId=flash.utils.Interval(function{ flash.utils.clearInterval(ervalId); Upload_File; },500,null); },function{ rp.executeBindings(true); }); }
上传 思路方法很简单就是从0索引开始上传 把上传完成 文件移走继续上传下 个直到列表上传完成 如果现在继添加上传文件也会排到队列后等待上传 不过实际情况你可以同时上传多个 只要对区别UploadFile Upload即可 服务端代码 对于采用什么样 服务端来完成文件处理就根据自己 喜好了 我用 是自己基于C#编写 http xml服务 [ActionMapper] publicFileUpload:Users.WebService.ActionBase { publicTitle { get; ; } publicNClay.FileFile { get; ; } publicFolderID { get; ; } protectedoverridevoidOnExecute { base.OnExecute; Expressionexp=Folder.folderIDFolderID&Folder.owner!=Loginer.UserID; (Folder.Count(exp)>0) throwException("无权在其他人文件夹中添加文件!"); filename=Guid.NewGuid.+.IO.Path.GetExtension(File.Name); Files.Filef=File; f.Owner=Loginer.UserID; f.OwnerName=Loginer.UserName; f.FileName=filename; f.CreateDate=DateTime.Now; f.Title=Title; f.FolderID=FolderID; f.DownloadName=.IO.Path.GetFileNameWithoutExtension(Title)+.IO.Path.GetExtension(File.Name); f.Save; FileHandler.SaveFile(Loginer.UserName,f.FileName,File); } protectedoverrideboolSigninAccess { get { true; } } } 实际应用效果图
相关文章
读者评论
发表评论
|
|