Flex 通过Blazeds上传文件

本文讲的是通过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上传文件的过程。