Mikel
[转载]Flex 通过Blazeds上传文件 – 宅男Johnny – 博客园.
本文讲的是通过Blazeds实现Flex文件上传，关于Blazeds的配置在这里就不赘述了，下面直接开讲。
说到Flex上传文件，就不得不用到FileReference了，下图是FileReference的属性：
可见data属性是ByteArray格式的，由其可以想到如果我们要上传文件，必然是将文件已比特流的形式通过网络上传到服务器。既然如此，我们就在服务器端写一个接受数据的JAVA类UploadFile。
UploadFile.java
1 package upload; 2 3 import java.io.File; 4 import java.io.FileOutputStream; 5 6 public class UploadFile { 7 public void uploadFile(byte[] content, String fileName) 8 throws Exception{ 9 File file = new File("路径"+fileName); 10 FileOutputStream stream = new FileOutputStream(file); 11 if(content != null) 12 stream.write(content); 13 stream.close(); 14 } 15 }
我在做的时候新建文件路径使用的是相对路径，在部署到blazeds之后发现文件总是上传不成功，改成绝对路径之后问题解决。其次，我用的 Flex IDE是Flash Builder4(从4代开始不再叫Flex Builder)，经常莫名其妙地出现上传文件的data属性为null的情况，因此加了一个判断content是否为null的语句，各位可以忽略。
做完服务器的接收部分了，现在可以开始写我们的上传代码了。
PopUpImage.mxml
1 <?xml version="1.0" encoding="utf-8"?> 2 <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx" width="240" height="120" 5 close="titleWindow_close()" 6 creationComplete="titleWindow_creationComplete()" 7 currentState="pre_upload"> 8 <fx:Script> 9 <![CDATA[ 10 import event.ImageUploadedEvent; 11 import flash.events.Event; 12 import flash.net.FileFilter; 13 import flash.net.FileReference; 14 import mx.controls.Alert; 15 import mx.events.CloseEvent; 16 import mx.managers.PopUpManager; 17 import mx.rpc.events.FaultEvent; 18 import mx.rpc.events.ResultEvent; 19 20 private var fileRef:FileReference = new FileReference(); 21 22 private function titleWindow_close():void 23 { 24 PopUpManager.removePopUp(this); 25 } 26 27 private function titleWindow_creationComplete():void 28 { 29 PopUpManager.centerPopUp(this); 30 } 31 32 private function pickFile(evt:MouseEvent):void 33 { 34 var imageTypes:FileFilter = new FileFilter("图片 (*.jpg, *.jpeg, *.gif,*.png)", "*.jpg; *.jpeg; *.gif; *.png"); 35 var allTypes:Array = new Array(imageTypes); 36 fileRef.addEventListener(Event.SELECT, selectHandler); 37 fileRef.addEventListener(ProgressEvent.PROGRESS, progressHandler); 38 fileRef.addEventListener(Event.COMPLETE, completeHandler); 39 try{ 40 fileRef.browse(allTypes); 41 }catch (error:Error){ 42 trace("Unable to browse for files."+error.toString()); 43 } 44 } 45 46 private function progressHandler(evt:ProgressEvent):void 47 { 48 lb_progress.text = " 已上传 " + (evt.bytesLoaded/1024).toFixed(2)+ " K，共 " + (evt.bytesTotal/1024).toFixed(2) + " K"; 49 var proc: uint = evt.bytesLoaded / evt.bytesTotal * 100; 50 progress.setProgress(proc, 100); 51 progress.label= "当前进度: " + " " + proc + "%"; 52 } 53 54 private function selectHandler(evt:Event):void 55 { 56 currentState = "uploading"; 57 fileRef.load(); 58 } 59 60 private function completeHandler(evt:Event):void{ 61 currentState = "post_upload"; 62 upload.uploadFile(fileRef.data,fileRef.name); 63 image_post_upload.source = fileRef.data; 64 } 65 66 ]]> 67 </fx:Script> 68 <fx:Declarations> 69 <s:RemoteObject id="upload" destination="uploadFile"/> 70 </fx:Declarations> 71 <s:states> 72 <s:State name = "pre_upload"/> 73 <s:State name = "uploading"/> 74 <s:State name = "post_upload"/> 75 </s:states> 76 <s:Button includeIn="pre_upload" label="从电脑上上传图片" width="119" click="pickFile(event)" horizontalCenter="-1" y="29"/> 77 <mx:ProgressBar id="progress" includeIn="uploading" x="43" y="43" width="153"/> 78 <s:Label id="lb_progress" includeIn="uploading" x="45" y="10" width="149" height="25"/> 79 <s:Label id="lb_post_upload" includeIn="post_upload" x="108" y="21" width="124" height="32" fontSize="16" text="upload success!" fontFamily="Arial" color="#3374DE"/> 80 <s:Button includeIn="post_upload" x="159" y="60" label="返回" click="titleWindow_close()"/> 81 <mx:Image id="image_post_upload" includeIn="post_upload" x="10" y="10" width="67" height="67"/> 82 </s:TitleWindow> 83
这个文件是我写的一个组件，并不是一个可执行的mxml文件。组件有三个状态，分别为upload前、中、后期。
这里重点说的是RemoteObject，需要在remoting-config.xml文件中进行配置。
1 <destination id="uploadFile" channels="my-amf"> 2 <properties> 3 <source>upload.UploadFile</source> 4 </properties> 5 </destination>
以上就是一个完整的Flex通过Blazeds上传文件的过程。
