`

Flex中的文件上传与下载

    博客分类:
  • flex
 
阅读更多

和传统的JSP一样,在flex中,有的时候也需要实现文件上传和下载的功能,但是在flex里文件的上传和下载的实现相对来说比较复杂,如何实现,请看下面。

    由于flex是一个比较新的技术,在研究的时候,还是按着JSP的方式去尝试,在开始之初,主要有以下几种思路:

    A、利用ftp的方式进行文件的上传和下载,需要利用flex的socket接口。

    B、利用webService的方式来进行文件的上传和下载

    C、利用flex+sevlet+fileupload组件实现文件的上传和下载

    在通过比较后,最后选择了第三种,用Flex+sevlet的方式来完成文件上传和下载的功能,理由如下(与上面的思路相对应):

    A、涉及到了流的操作,实现起来比较复杂,出现错误的几率比较高

    B、关于flex端的可参考的资料比较少,并且还需要启动webservice服务

    C、这个技术比较成熟,从flex2.0开始,在flex端已经可以引用FileReference类了,并且在java端有成熟的组件可以使用,所以最后考虑使用该种方法来处理。

一、文件的上传

    1、Flex端
        A、使用到的类介绍:
            FileReference 类提供了在用户计算机和服务器之间上载和下载文件的方法。 操作系统对话框会提示用户选择要上载的文件或用于下载的位置。它主要能实现一个文件的上传。
            FileReferenceList 类提供了让用户选择一个或多个要上载的文件的方法。 FileReferenceList 对象将用户磁盘上的一组本地文件(一个或多个文件)表示为 FileReference 对象的数组。
        B、使用 FileReferenceList 类 实现多文件上传:
            1) 将该类实例化:var myFileRef = new FileReferenceList(); 
            2) 调用 FileReferenceList.browse() 方法,该方法将打开一个对话框,让用户选择一个或多个要上载的文件:myFileRef.browse(); 
            3) 在成功调用 browse() 方法之后,使用 FileReference 对象数组来填充 FileReferenceList 对象的 fileList 属性。 
                对 fileList 数组中的每个元素调用 FileReference.upload()

        代码如下:

    /** *//**
     * 执行上传操作
     * */    
    private function upLoadFiles():void
    {
        try
        {
            selectFileList.browse(new Array(imageFilter, textFilter));
            selectFileList.addEventListener(Event.SELECT, selectHandler1);
        }
        catch (error:Error) 
        {
            Alert.show(“文件选择出现错误,请选择正确的文件”);
        }
    }
    /** *//**
     * 如果文件被选中,则执行该方法
     * */
    function selectHandler1(event:Event):void
    {
        var request:URLRequest = new URLRequest(“FileUploadServlet”);
        var upLoadFile:FileReference; 
        var upLoadFileList:FileReferenceList = FileReferenceList(event.target);
        var selectedFileArray:Array = upLoadFileList.fileList;
        login =(testPress)(PopUpManager.createPopUp( this, testPress , true));
        for (var i:uint = 0; i < selectedFileArray.length; i++)
        { 
            upLoadFile = FileReference(selectedFileArray[i]);
            upLoadFile.addEventListener(Event.COMPLETE, UpLoadcompleteHandler);
            upLoadFile.addEventListener(ProgressEvent.PROGRESS, progressHandler); 
            try
            {
                upLoadFile.upload(request);
            }
            catch (error:Error)
            {
                Alert.show(error.message.toString());
            }
        }
    }
    function UpLoadcompleteHandler(event:Event):void
    {
         var upLoadFiles:FileReference = FileReference(event.target);
         var fileNames = upLoadFiles.name;
         //Alert.show(‘文件’+fileNames+’上传成功’)
         login.myLabels.text = ’文件’+fileNames+’上传成功’;
    }
     private function progressHandler(e:ProgressEvent):void
  { 
    var proc: uint = e.bytesLoaded / e.bytesTotal * 100;  
    login.bar.setProgress(proc, 100);  
    login.bar.label= ”当前进度: ” + ” ” + proc + ”%”;  
 } 

testPress.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:TitleWindow xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”528″ height=”236″>
<mx:Script>
    <![CDATA[
        import mx.managers.PopUpManager;
        public function clickMe():void {
            PopUpManager.removePopUp(this);
        }
    ]]>
</mx:Script>
    <mx:ProgressBar id=”bar” labelPlacement=”bottom” themeColor=”#F20D7A”  
minimum=”0″ visible=”true” maximum=”100″ label=”当前进度: 0%”  
direction=”right” mode=”manual” width=”200″ x=”154″ y=”84″/>  
    <mx:Button x=”221″ y=”135″ label=”关闭” click = ”clickMe();”/>
    <mx:Label x=”173″ y=”27″ id=”myLabels” width=”157″/>

 

</mx:TitleWindow>


    2、JAVA端

     接受Flex端的请求,在JAVA端利用apache的fileupload类库实现上传功能。代码如下:

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Iterator;
import java.util.List;
import java.util.Properties;

 

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class FileUploadServlet extends HttpServlet
{

    // private String uploadPath = ”D:\\upload\\”;
    private String path = ”file_path.properties”;
    private String skStr = ”";
    private String uploadPath = ”";
    private int maxPostSize = 1000 * 1024 * 1024;

    public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException,
            IOException
    {
        String filePathaa = this.getServletConfig().getServletContext().getRealPath(“/”);

        Properties p = loadProperties(path);

        uploadPath = p.getProperty(“filepath”);

        res.setContentType(“text/html;charset=UTF-8″);
        req.setCharacterEncoding(“UTF-8″);

        DiskFileItemFactory factory = new DiskFileItemFactory();
        factory.setSizeThreshold(1024*20);

        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setSizeMax(maxPostSize);
        try
        {
            List fileItems = upload.parseRequest(req);
            Iterator iter = fileItems.iterator();
            while (iter.hasNext())
            {
                FileItem item = (FileItem) iter.next();
                if (!item.isFormField())
                {
                    String name = item.getName();

                    try
                    {
                        File skFile = new File(uploadPath + name);
                        if (skFile.exists())
                        {
                            skFile.delete();
                            item.write(new File(uploadPath + name));

                        }
                        else
                        {
                            item.write(new File(uploadPath + name));
                        }

                    } catch (Exception e)
                    {
                        e.printStackTrace();
                    }
                }
            }
        } catch (FileUploadException e)
        {
            e.printStackTrace();
        }

    }

    public Properties loadProperties(String path) throws IOException
    {

        InputStream in = this.getClass().getResourceAsStream(path);
        //

        Properties p = new Properties();

        p.load(in);
        in.close();
        return p;
    }

}

还要修正web.xml,添加如下内容

<!– For file uploaded –>
   <servlet>
        <servlet-name>FileUploadServlet</servlet-name>
        <servlet-class>FileUploadServlet</servlet-class>
    </servlet>

 

    <servlet-mapping>
        <servlet-name>FileUploadServlet</servlet-name>
        <url-pattern>/FileUploadServlet</url-pattern>
    </servlet-mapping>

二、文件的下载
    

    调用的方法:private function downLoadFiles(urlAdd:String):void
    参数urlAdd就是用户的ip地址,如果使用本地的localhost就会产生安全沙箱问题,因此让用户自己输入自己的ip地址。这样就避免了安全沙箱的问题。如果是本机启动服务,访问地址,需要输入IP,不能用localhost来代替本机的IP地址,否则,还是会出现安全沙箱问题。

     FileReference.download() 方法提示用户提供文件的保存位置并开始从远程 URL 进行下载。直接加载请求路径下载,不需要后台的支持。代码如下:

import com.systex.flex.util.testPress;

 

import flash.net.FileReferenceList;

import mx.controls.Alert;
import mx.managers.PopUpManager;
    var imageFilter:FileFilter = new FileFilter(“Image Files (*.jpg, *.jpeg, *.gif, *.png)”, ”*.jpg; *.jpeg; *.gif; *.png”);
    var textFilter:FileFilter = new FileFilter(“Text Files (*.txt, *.rtf, *.zip)”, ”*.txt; *.rtf; *.zip”);
    var selectFileList:FileReferenceList = new FileReferenceList();
    var selectedFileArray:Array = new Array();
    var login:testPress = new testPress();
    var downloadURL:URLRequest;
    var DownLoadfile:FileReference; //这是要主要的地方
    //http://XX.XX.XX.XX:8080/upload/main.zip
    private function downLoadFiles(urlAdd:String):void
    {
        downloadURL = new URLRequest(urlAdd);
        DownLoadfile = new FileReference();
        configureListeners(DownLoadfile);
        DownLoadfile.download(downloadURL);
    }
     private function configureListeners(dispatcher:IEventDispatcher):void {
        dispatcher.addEventListener(Event.COMPLETE, completeHandler);

    }
    
    private function completeHandler(event:Event):void {
    mx.controls.Alert.show(“文件下载成功”);
    }

这里的是上面上传代码的上部分

附上测试的MXML

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
    >
<mx:Script source=”UpDownLoadFiles.as”/>

 

    <mx:Canvas width=”100%” height=”100%” x=”10″ y=”170″ fontSize=”15″>
    <mx:VBox width=”100%” horizontalAlign=”center”>
    <mx:TextInput id=”mytextInput”/>
    <mx:Button label=”文件下载” click=”downLoadFiles(‘http://’+mytextInput.text+’:8080/downLoading/2MSN.rar’);”/>
    <mx:Button label=”上传文件” click=”upLoadFiles();”/>
    </mx:VBox>
    </mx:Canvas>
</mx:Application>

分享到:
评论

相关推荐

    Flex上传文件与下载

    ### Flex与Servlet结合实现文件上传及下载功能 在Flex与Servlet技术结合的背景下,本文将详细介绍如何通过这两种技术实现文件的上传与下载功能。通过分析提供的代码片段,我们可以看到一个典型的Flex应用程序界面...

    flex文件上传下载

    Flex文件上传下载是一种在Web应用中实现文件交互的技术,它主要使用Adobe Flex框架来构建富互联网应用程序(RIA)。Flex提供了一种强大的方式来创建交互式的、图形化的用户界面,其中包括处理文件上传和下载功能。在...

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

    在IT行业中,文件上传下载和在线浏览功能是许多应用程序和服务的核心组成部分,特别是在文档协作、文件管理系统和云存储服务中。本篇文章将详细讲解如何实现"flex文件上传下载,在线以pdf形式浏览文件"这一功能。 ...

    Flex 多文件上传组件

    这个组件在Web应用程序中非常实用,特别是在处理大量图片、文档或其他类型文件上传的场景下,大大提升了用户体验。 首先,我们来看核心组件`MultiFileUpload.as`。这个文件是ActionScript 3(AS3)编写的,它是整个...

    Flex附件上传下载

    总之,Flex附件上传下载涉及到客户端的文件选择和传输、服务器端的文件处理以及两者之间的通信协议。通过熟练掌握`FileReference`类和HttpHandler,开发者可以构建出高效且用户友好的文件上传下载功能。这个教程资源...

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

    建议使用描述中提到的修正版代码:“flex 文件上传下载完整代码(修正版)”,以获取更稳定、可靠的实现。 请注意,由于跨域安全限制,Flex的文件上传和下载功能可能会受到一些约束。在实际开发中,需要确保服务器...

    Flex+WebService附件上传下载

    总之,Flex与WebService结合使用,能够创建高效、跨平台的文件上传和下载解决方案。理解并掌握这一技术,对于开发人员来说是非常有价值的,尤其是在构建企业级RIA应用时。通过深入学习和实践,你可以进一步提升在RIA...

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

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

    Flex文件上传组件

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

    flex实现多文件上传

    在Flex中实现多文件上传,通常涉及到ActionScript编程、组件使用以及与服务器端的交互。下面将详细介绍如何使用Flex来实现这个功能。 一、Flex中的文件选择组件 在Flex中,我们可以使用`FileReference`类来处理文件...

    Flex文件上传的组件

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

    Flex+Java 文件上传

    在本文中,我们将深入探讨如何实现Flex与Java Servlet结合进行文件上传。首先,我们需要了解Flex是一种基于Adobe AIR的开源框架,用于构建富互联网应用程序(RIA),而Java Servlet是Java平台上的一个标准,用于处理...

    flex 多文件上传

    在提供的链接中,博主可能详细讨论了如何在Flex项目中实现多文件上传的过程,包括代码示例和可能遇到的问题。遗憾的是,由于没有具体的博客内容,我们无法深入探讨博主的具体实现方式。不过,可以推测博主可能分享了...

    flex+java文件上传

    综上所述,"flex+java文件上传"涉及到前端的Flex界面设计与交互、Flash Player运行环境、后端的Java处理逻辑以及文件上传的安全性和性能优化等多个知识点。在实际应用中,开发者需要结合这些技术来实现稳定、安全且...

    flex文件上传下载组件

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

    flex 文件上传 预览下载 及中文名乱码解决问题

    本篇文章将详细介绍如何在Flex中实现文件上传、预览、下载功能,并解决中文文件名在这些操作中可能出现的乱码问题。 首先,文件上传是通过HTTP的POST请求来实现的。在Flex中,我们可以使用`URLLoader`类来发送数据...

    Flex文件上传下载

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

    flex3 java 文件上传源码

    在这个“flex3 java 文件上传源码”中,我们有两个主要部分:Flex端(Upload)和Java端(UpLoadServer),它们分别负责用户的界面交互和后台的数据处理。 Flex3是一个基于ActionScript3的富互联网应用程序框架,...

Global site tag (gtag.js) - Google Analytics