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

转载于:https://www.cnblogs.com/zhainanJohnny/articles/1888310.html