利用Flex的FileReference类和FileReferenceList类实现，首先要brow方法选择文件，load方法装载数据（切记），否在会出现IO错误，因为filereference实例的data属性null，没有引用到选择的文件，最后调用upload即可实现上传。
客户端：
逻辑处理部分：
View Code
1 <fx:Script> 2 <![CDATA[ 3 import mx.collections.ArrayCollection; 4 import mx.controls.Alert; 5 import mx.controls.ProgressBar; 6 import mx.events.CollectionEvent; 7 import mx.formatters.CurrencyFormatter; 8 import mx.formatters.NumberFormatter; 9 10 private var fileRefs:FileReferenceList =new FileReferenceList(); 11 //服务器地址 12 private var urlRequest:URLRequest =new URLRequest("http://localhost:4283/fileload/Default.aspx"); 13 //文件列表 14 [Bindable] 15 private var selectedFiles:ArrayCollection =new ArrayCollection([]); 16 private var singleThreadFiles:Array=[]; 17 [Bindable] 18 private var useSingleThread:Boolean=true; 19 20 private function init():void 21 { 22 Security.allowDomain("*"); 23 fileRefs.addEventListener(Event.SELECT,fileSelectHandler); 24 fileRefs.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler); 25 fileRefs.addEventListener(Event.COMPLETE, completeHandler); 26 27 } 28 private function selectFile():void{ 29 var fileFiter1:FileFilter=new FileFilter("Images","*.png;*.gif;*jpg"); 30 var fileFiter2:FileFilter=new FileFilter("Documents","*.txt;*.doc;*.pdf;*.docx;*.xml"); 31 fileRefs.browse([fileFiter1,fileFiter2]); 32 } 33 34 private function fileSelectHandler(event:Event):void{ 35 //遍历选择的文件 36 for each (var f:FileReference in fileRefs.fileList) 37 { 38 selectedFiles.addItem(f); 39 f.load(); 40 } 41 } 42 //上传文件 43 private function uploadFile():void{ 44 for each(var f:FileReference in selectedFiles) 45 { 46 try 47 { 48 f.upload(urlRequest); 49 } 50 catch(e:Error) 51 { 52 Alert.show(e.message); 53 } 54 } 55 } 56 private function singleThreadUploadFile():void{ 57 //FIFO:逐个从列表中取出，进行同步 58 if(singleThreadFiles.length >0) 59 { 60 var f:FileReference=singleThreadFiles.pop() as FileReference; 61 f.addEventListener(Event.COMPLETE,doSingleUploadFileComplete); 62 f.upload(urlRequest); 63 } 64 } 65 private function doSingleUploadFileComplete(event:Event):void{ 66 var f:FileReference =event.target as FileReference; 67 f.removeEventListener(Event.COMPLETE, doSingleUploadFileComplete); 68 singleThreadUploadFile(); 69 } 70 71 private function ioErrorHandler(e:IOErrorEvent):void 72 { 73 Alert.show(e.text); 74 } 75 76 private function completeHandler(e:Event):void{ 77 78 img.source=e.target.date; 79 } 80 private function showImage(e:Event):void{ 81 var f:FileReference=(e.target as DataGrid).selectedItem as FileReference; 82 f.addEventListener(Event.COMPLETE,completeHandler); 83 f.load(); 84 } 85 86 public function removeFile(f:FileReference):void 87 { 88 var index:int= selectedFiles.getItemIndex(f); 89 if(index !=-1) 90 selectedFiles.removeItemAt(index); 91 } 92 93 //上传文件 94 private function upLoad():void 95 { 96 if (useSingleThread) 97 { 98 //逐个上传 99 singleThreadFiles = selectedFiles.toArray().concat(); 100 singleThreadFiles.reverse(); 101 singleThreadUploadFile(); 102 } 103 else 104 { 105 //多个文件同时上传 106 uploadFile(); 107 } 108 } 109 ]]> 110 </fx:Script>
界面设计在DataGrid中显示进度条：
界面设计
1 <s:VGroup width="100%" height="100%"> 2 <s:HGroup width="100%"> 3 <mx:Button id="selectFileButton" label="浏览" click="selectFile()"/> 4 <mx:Box width="100%" horizontalAlign="right"> 5 <mx:Button click="selectedFiles.removeAll()" label="清空"/> 6 </mx:Box> 7 </s:HGroup> 8 <s:HGroup> 9 <s:DataGrid id="files" width="100%" height="130" 10 dataProvider="{selectedFiles}"> 11 <s:columns> 12 <s:ArrayList> 13 <s:GridColumn headerText="文件名" dataField="name" width="150" /> 14 <s:GridColumn headerText="文件大小(字节)" > 15 <s:itemRenderer> 16 <fx:Component> 17 <s:GridItemRenderer> 18 <s:Label text="{data.size}" textAlign="center" width="150" /> 19 </s:GridItemRenderer> 20 </fx:Component> 21 </s:itemRenderer> 22 </s:GridColumn> 23 <s:GridColumn headerText="上传进度" width="300" > 24 <s:itemRenderer> 25 <fx:Component> 26 <s:GridItemRenderer> 27 <s:HGroup> 28 <mx:Canvas updateComplete="updateCompleteHandler(event,data)" creationComplete="canvas1_creationCompleteHandler(event,data)" > 29 <fx:Script> 30 <![CDATA[ 31 import mx.controls.Alert; 32 import mx.events.FlexEvent; 33 protected function updateCompleteHandler(event:FlexEvent,d:Object):void 34 { 35 // TODO Auto-generated method stuba 36 var f:FileReference = data as FileReference; 37 //使用闭包方法，更新进度条 38 f.addEventListener(ProgressEvent.PROGRESS,function(event:ProgressEvent):void 39 { 40 41 pb.setProgress(event.bytesLoaded,event.bytesTotal); 42 43 44 }); 45 } 46 protected function canvas1_creationCompleteHandler(event:FlexEvent,d:Object):void 47 { 48 pb.minimum=0; 49 pb.maximum=100; 50 } 51 52 protected function linkbutton2_clickHandler(event:Event):void 53 { 54 // TODO Auto-generated method stub 55 var f:FileReference = data as FileReference; 56 outerDocument.removeFile(f); 57 } 58 ]]> 59 </fx:Script> 60 <mx:ProgressBar direction="right" mode="manual" width="100%" id="pb" label="%3%%" /> 61 </mx:Canvas> 62 <mx:Button label="删除" click="linkbutton2_clickHandler(event)" /> 63 </s:HGroup> 64 </s:GridItemRenderer> 65 </fx:Component> 66 </s:itemRenderer> 67 </s:GridColumn> 68 </s:ArrayList> 69 </s:columns> 70 </s:DataGrid> 71 </s:HGroup> 72 <s:HGroup> 73 <mx:Button label="上传" click="upLoad()" /> 74 <mx:CheckBox id="checkboxSingleThread" label="同时上传多个文件" selected="{!useSingleThread}" change="useSingleThread = !checkboxSingleThread.selected"/> 75 <mx:Image id="img" width="50" height="50"/> 76 </s:HGroup> 77 </s:VGroup>
服务端：
参考网络
服务端相应
1 string uploadFolder = "myupload"; // 上传文件夹 2 protected void Page_Load(object sender, EventArgs e) 3 { 4 HttpFileCollection files = Request.Files; 5 6 if (files.Count == 0) 7 { 8 Response.Write("请勿直接访问本文件"); 9 Response.End(); 10 } 11 12 string path = Server.MapPath(uploadFolder); 13 14 // 只取第 1 个文件 15 HttpPostedFile file = files[0]; 16 17 if (file != null && file.ContentLength > 0) 18 { 19 // flash 会自动发送文件名到 Request.Form["fileName"] 20 string savePath = path + "/"+Request.Form["fileName"]; 21 file.SaveAs(savePath); 22 } 23 }
