`
quliangjun
  • 浏览: 20087 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

flex文件上传

    博客分类:
  • flex
 
阅读更多

本文讲的是通过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); //路径是你存文件的路径 比如c:\upload\
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 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
      currentState="pre_upload"
      creationComplete="init()">
 <s:layout>
  <s:BasicLayout/>
 </s:layout>
 <fx:Script>
  <![CDATA[
   //import mx.events.ImageUploadedEvent;
   import flash.events.Event;
   import flash.net.FileFilter;
   import flash.net.FileReference;
   import mx.controls.Alert;
   import mx.managers.PopUpManager;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   import mx.rpc.remoting.mxml.RemoteObject;
   
   private var fileRef:FileReference = new FileReference();
   
   private var upload:RemoteObject = new RemoteObject();
   private function init():void{
    upload.destination="UploadFile";
   }
   
   private function pickFile(evt:MouseEvent):void
   {
    var imageTypes:FileFilter = new FileFilter("图片 (*.jpg, *.jpeg, *.gif,*.png)", "*.jpg; *.jpeg; *.gif; *.png");
    var allTypes:Array = new Array(imageTypes);
    fileRef.addEventListener(Event.SELECT, selectHandler);
    fileRef.addEventListener(ProgressEvent.PROGRESS, progressHandler);
    fileRef.addEventListener(Event.COMPLETE, completeHandler);
    try{
     fileRef.browse(allTypes);
    }catch (error:Error){
     trace("Unable to browse for files."+error.toString());
    }
   }
   
   private function progressHandler(evt:ProgressEvent):void
   {
    lb_progress.text = " 已上传 " + (evt.bytesLoaded/1024).toFixed(2)+ " K,共 " + (evt.bytesTotal/1024).toFixed(2) + " K";
    var proc: uint = evt.bytesLoaded / evt.bytesTotal * 100;
    progress.setProgress(proc, 100);
    progress.label= "当前进度: " + " " + proc + "%";
   }
   
   private function selectHandler(evt:Event):void
   {
    currentState = "uploading";
    fileRef.load();
   }
   
   private function completeHandler(evt:Event):void{
    currentState = "post_upload";
    upload.uploadFile(fileRef.data,fileRef.name);
    image_post_upload.source = fileRef.data;
   }
   
  ]]>
 </fx:Script>
 <s:states>
  <s:State name = "pre_upload"/>
  <s:State name = "uploading"/>
  <s:State name = "post_upload"/>
 </s:states>
 <s:Button includeIn="pre_upload" label="从电脑上上传图片" width="119" click="pickFile(event)" horizontalCenter="-1" y="29"/>
 <mx:ProgressBar id="progress" includeIn="uploading" x="43" y="43" width="153"/>
 <s:Label id="lb_progress" includeIn="uploading" x="45" y="10" width="149" height="25"/>
 <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"/>
 <mx:Image id="image_post_upload" includeIn="post_upload" x="10" y="10" width="67" height="67"/>
</s:Application>
    组件有三个状态,分别为upload前、中、后期。 
  这里重点说的是RemoteObject,需要在remoting-config.xml文件中进行配置。 

remoting-config.xml的位置是在Web-inf\flex里  另外编译的时候要加上参数指向这个文件 参考我的文章

http://hi.baidu.com/caidows/blog/item/19366bc61e79f9089c163de7.html

remoting-config.xml添加
1 <destination id="uploadFile" channels="my-amf"> 
2 <properties> 
3 <source>upload.UploadFile</source> 
4 </properties> 
5 </destination> 
以上就是一个完整的Flex通过Blazeds上传文件的过程。

原作者:mikel 转自:http://www.douban.com/group/topic/15982509/

分享到:
评论

相关推荐

    Flex文件上传的组件

    Flex文件上传组件是一种基于Adobe Flex技术的用户界面组件,它允许用户在Web应用程序中选择并上传文件。在Flex中,这种组件通常会显示一个文件选择对话框,让用户选择要上传的文件,并且会提供一个进度条来显示上传...

    Flex 文件上传 java是后台服务

    Flex 文件上传技术是一种在Web应用中实现用户向服务器端上传文件的方法,通常涉及到前端的Flex技术与后端的Java服务进行交互。Flex是一款强大的富互联网应用程序(RIA)开发框架,由Adobe公司提供,用于创建动态、...

    flex文件上传下载,在线以pdf形式浏览文件

    本篇文章将详细讲解如何实现"flex文件上传下载,在线以pdf形式浏览文件"这一功能。 首先,让我们了解一下“flex”在这里的含义。Flex通常指的是Adobe Flex,一个用于构建富互联网应用(RIA)的开源框架。它基于...

    Flex文件上传(某GIS系统,我负责的文件上传部分)

    Flex文件上传技术是基于Adobe Flex框架实现的一种交互式文件上传方式,常用于GIS(Geographic Information System,地理信息系统)这样的应用中,以便用户能够方便地上传地理数据、地图图像等文件。在我负责的GIS...

    flex文件上传下载

    在 Flex 开发中,文件上传和下载是常见的需求,尤其对于需要处理大量用户上传内容的应用来说,这是一项关键功能。Flex 提供了便捷的方式来进行文件的上传和下载操作,同时可以有效利用服务器资源,提高服务器性能。...

    Flex文件上传组件

    Flex文件上传组件是一种基于Adobe Flex技术的用户界面组件,用于在Web应用中实现文件上传功能。Flex是一个开源的RIA(富互联网应用)框架,它允许开发者创建交互性强、图形丰富的Web应用。在这个组件中,用户可以...

    Flex文件上传文件代码

    Flex 文件上传的文件代码 交你一步一步的完成上传功能

    flex文件上传系统

    Flex文件上传系统是一种基于Adobe Flex技术构建的前端文件上传解决方案。Flex是Adobe公司推出的一种用于构建富互联网应用程序(RIA)的开发框架,它基于ActionScript编程语言和MXML标记语言,能够创建高度交互、视觉...

    flex文件上传下载组件

    Flex文件上传下载组件是基于Adobe Flex技术和Java后端开发的一款功能强大的交互式应用程序,它允许用户在Web浏览器中实现文件的便捷上传与下载。这款组件通常由前端的Flex客户端和后端的Java服务器端两部分组成,...

    Flex文件上传下载

    Flex文件上传下载是一种基于Adobe Flex技术的Web应用功能,它结合了Java后端服务来实现文件的上传和下载。在Flex前端,用户可以方便地通过图形界面选择文件,并通过Ajax方式与Java服务器进行异步通信,实现数据的...

    flex 文件上传下载完整代码(废弃--代码有错误)

    在本文中,我们将深入探讨基于Flex的文件上传和下载功能,以及如何利用FileReference类来实现这一过程。Flex是Adobe Flash Platform的一部分,它提供了一种强大的方式来构建富互联网应用程序(RIA)。在Flex中,我们...

    FLEX文件上传工具

    **FLEX文件上传工具**是一种基于Adobe Flex技术和ASP.NET框架构建的在线文件上传解决方案。Flex是一种用于构建富互联网应用程序(RIA)的开放源代码开发框架,它允许开发者创建具有交互性和动态图形效果的Web应用。...

    自己封装的Flex文件上传组件FileInput

    《自封装Flex文件上传组件FileInput详解》 在IT行业中,开发用户友好的文件上传功能是常见的需求。本文将深入探讨一个自封装的Flex文件上传组件——FileInput,旨在帮助开发者更好地理解和应用这一工具,提升项目的...

    flex文件上传_XML

    ### 核心知识点:Flex文件上传与XML的应用 #### 1. Flex与文件上传 Flex是一种用于构建高性能、高视觉效果的Web应用程序的开源框架。它主要由Adobe Systems开发,并基于ActionScript语言。在Flex中进行文件上传通常...

    flex 文件上传

    在Flex文件上传的过程中,有几个重要的事件需要处理: 1. **选择文件 (`SELECT`)**:当用户选择了文件后触发。 2. **上传进度 (`PROGRESS`)**:在文件上传过程中周期性地触发。 3. **上传完成 (`UPLOAD_COMPLETE_...

    Flex多文件上传+md5验证文件是否上传

    2. **Flex文件上传**:Flex应用程序通常使用HTTPService或WebService组件与服务器进行通信。在文件上传过程中,我们可以将FileReference对象的data属性绑定到HTTPService的requestContent,然后调用send方法发起POST...

    flex 文件上传 例子 源码

    在这个"flex 文件上传 例子 源码"中,我们将深入探讨Flex如何实现文件上传以及与Java后端的交互。 首先,前台上传通常涉及到用户界面的设计,使用户能够选择要上传的文件。在Flex中,我们可以使用`FileReference`类...

    Flex文件上传【源码】

    Flex文件上传【源码】是基于Adobe Flex技术与Java Servlet技术实现的一种文件上传解决方案。Flex是一种用于构建富互联网应用程序(RIA)的开放源代码框架,它允许开发者创建具有交互性和动态性的用户界面,而Java ...

Global site tag (gtag.js) - Google Analytics