Flex 通过Blazeds上传文件

　　本文讲的是通过Blazeds实现Flex文件上传，关于Blazeds的配置在这里就不赘述了，下面直接开讲。　　

　　说到Flex上传文件，就不得不用到FileReference了，下图是FileReference的属性：

　　可见data属性是ByteArray格式的，由其可以想到如果我们要上传文件，必然是将文件已比特流的形式通过网络上传到服务器。既然如此，我们就在服务器端写一个接受数据的JAVA类UploadFile。

package upload;
 2 
 3  import java.io.File;
 4  import java.io.FileOutputStream;
 5 
 6  publicclass UploadFile {
 7 publicvoid 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的语句，各位可以忽略。

　　做完服务器的接收部分了，现在可以开始写我们的上传代码了。

 

<?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文件中进行配置。

 

 

 

<destination id="uploadFile" channels="my-amf"> 
2 <properties>
3 <source>upload.UploadFile</source>
4 </properties>
5  </destination>

 

以上就是一个完整的Flex通过Blazeds上传文件的过程。