JAVA & FLEX

一个分享java和flex开发经验的空间

   :: 首页 ::  :: 联系 ::  :: 管理 ::
  26 随笔 :: 2 文章 :: 44 评论 :: 0 Trackbacks

    和传统的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>

fileupload下载地址就不提供了,请到网上搜寻一下






posted on 2008-09-18 16:57 程序人生-天津 阅读(15337) 评论(1)  编辑  收藏 所属分类: Flex

评论

# re: 【心得】Flex中的文件上传与下载 2009-12-15 19:35
如果路径包含中文会出现错误  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: