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