Flex4之基于Servlet的文件上传

关于flex上传功能的实现依赖于FileReference类。该类实例对象的创建有两种方法：使用var myFileReference = new FileReference(); FileReferenceList.browse()。使用browse()或者FileReference.browse()方法可以打开上传窗口。

下面部分资源来自互联网，一个简单的上传组件代码，包括了监听ProgressEvent，选择的selectEvent和完成的completeEvent。为了避免硬编码，将urlRequest路径配置在一个xml里面，使用了httpservice进行请求，将结果用于UrlRequest的参数。这个HttpService采用了resultFormat="e4x"，那么要求返回来值为XML类型的

Flex上传需要两个包apache common fileupload.jar和apache common io.jar

下载地址

http://commons.apache.org/io/download_io.cgi

upload.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"
				   creationComplete="init()">
		
		<fx:Declarations>
			<!-- 将非可视元素（例如服务、值对象）放在此处 -->
			<mx:HTTPService id="httpService" resultFormat="e4x"/>   
		</fx:Declarations>
		
		<fx:Script>
			<![CDATA[
				import mx.rpc.events.FaultEvent;   
				import mx.rpc.events.ResultEvent;   
				import flash.net.FileReference;   
				import mx.controls.Alert;   
				import mx.events.CloseEvent;   
				import flash.events.*;   
				
				private var file:FileReference;   
				
				private var filePath:String="";   
				private function init():void  
				{   
					Security.allowDomain("*");   
					file=new FileReference();   
					file.addEventListener(ProgressEvent.PROGRESS, onProgress);   
					file.addEventListener(Event.SELECT, onSelect);   
					file.addEventListener(Event.COMPLETE,fileUploadCompleteHandler);   
					
					httpService.url="config.xml";   
					httpService.showBusyCursor=true;   
					httpService.send();   
					httpService.addEventListener(ResultEvent.RESULT,hsResultHandler);   
					httpService.addEventListener(FaultEvent.FAULT,hsFaultHandler);   
				}   
				
				//处理httpService获取的文件上载的servlet路径
				private function hsResultHandler(e:ResultEvent):void{   
					var xml:XML=e.result as XML;   
					filePath=xml.filepath.@path;   
				}   
				//httpService错误处理
				private function hsFaultHandler(e:FaultEvent):void{   
					Alert.show(e.fault.toString(),'http请求错误');   
				}   
				//文件上传完成
				private function fileUploadCompleteHandler(e:Event):void{   
					Alert.show("上传完成");   
					vBox.removeChild(bar);
					
				}   
				
				private function upload():void  
				{ 
					//配置文件类型过滤，不配置的时候可以上传任意文件
					var imageTypes:FileFilter=new FileFilter("Images (*.jpg, *.jpeg, *.png)", "*.jpg;*.jpeg;*.png");   
					var docFilter:FileFilter = new FileFilter("Documents", "*.pdf;*.doc;*.txt");
					//var viewFilter:FileFilter = new FileFilter("Views", "*.avi;*.flv;*.rmvb");
					var allTypes:Array=new Array(imageTypes,docFilter);   
					file.browse(allTypes);   
				    //file.browse();   
				}   
				
				private function onSelect(e:Event):void  
				{   
					Alert.show("上传 " + file.name + " (共 " + Math.round(file.size) + " 字节)?", "确认上传", Alert.YES | Alert.NO, null, proceedWithUpload);   
				}   
				
				private function onProgress(e:ProgressEvent):void  
				{   
					lbProgress.text=" 已上传 " + e.bytesLoaded + " 字节，共 " + e.bytesTotal + " 字节";   
					var proc:uint=e.bytesLoaded / e.bytesTotal * 100;   
					bar.setProgress(proc, 100);   
					bar.label="当前进度: " + " " + proc + "%";   
				}   
				
				private function proceedWithUpload(e:CloseEvent):void  
				{  
					if (e.detail == Alert.YES)   
					{   
						
						var request:URLRequest=new URLRequest(filePath);   
						try  
						{   
							file.upload(request);   
						}   
						catch (error:Error)   
						{   
							trace("上传失败");   
						}   
						
					}   
				}   
				
				
			]]>
		</fx:Script>
		
		
		<mx:Canvas width="100%"  
				   height="100%"  
				   x="10"  
				   y="170"  
				   fontSize="15">   
			<mx:VBox width="100%"  
					 horizontalAlign="center" id="vBox">   
				<mx:Label id="lbProgress"  
						  text="上传"/>   
				<mx:ProgressBar id="bar"  
								labelPlacement="bottom"  
								minimum="0"  
								visible="true"  
								maximum="100"  
								label="当前进度: 0%"  
								direction="right"  
								mode="manual"  
								width="200"/>   
				
				<mx:Button label="上传文件"  
						   click="upload();"/>   
			</mx:VBox>   
		</mx:Canvas>   
		
		
	</s:Application>

config.xml

<?xml version="1.0" encoding="UTF-8"?>  
<fileUploadPath>  
    <filepath id="filepathConfig" path="http://localhost/Flex_03_FileUpload/servlet/FileUploadServlet"/>  
</fileUploadPath>

UploadServlet

package com.test.servlet;

import java.io.File;   
import java.io.IOException;   
import java.io.PrintWriter;   
import java.util.Iterator;   
import java.util.List;   
  
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 = "c:\\";   
    // 限制文件的上传大小   
    private int maxPostSize = 10000000 * 1024 * 1024;   
  
    protected void processRequest(HttpServletRequest request,   
            HttpServletResponse response) throws ServletException, IOException {   
        System.out.println("Access !");   
        System.out.println(uploadPath);   
        // 防止中文乱码   
        request.setCharacterEncoding("utf-8");   
        response.setContentType("text/html;charset=UTF-8");   
        PrintWriter out = response.getWriter();   
        // 保存文件到服务器中   
        DiskFileItemFactory factory = new DiskFileItemFactory();   
        factory.setSizeThreshold(4096);   
        ServletFileUpload upload = new ServletFileUpload(factory);   
        upload.setSizeMax(maxPostSize);   
        try {   
            List fileItems = upload.parseRequest(request);   
            Iterator iter = fileItems.iterator();   
            while (iter.hasNext()) {   
                FileItem item = (FileItem) iter.next();   
                if (!item.isFormField()) {   
                    String name = item.getName();   
                    System.out.println(name);   
                    try {   
                        item.write(new File(uploadPath + name));   
                        // SaveFile s = new SaveFile();   
  
                        // s.saveFile(name);   
  
                    } catch (Exception e) {   
                        e.printStackTrace();   
                    }   
                }   
            }   
        } catch (FileUploadException e) {   
            e.printStackTrace();   
            System.out.println(e.getMessage() + "结束");   
        }   
    }   
  
    protected void doGet(HttpServletRequest request,   
            HttpServletResponse response) throws ServletException, IOException {   
        this.doPost(request, response);   
    }   
  
    protected void doPost(HttpServletRequest request,   
            HttpServletResponse response) throws ServletException, IOException {   
        processRequest(request, response);   
    }   
  
}

最后，说一下Flex的FileFilter 的用法

FileFilter 类用于指示在调用 FileReference.browse() 方法、FileReferenceList.browse() 方法或调用 File、FileReference 或 FileReferenceList 对象的 browse 方法时显示的文件浏览对话框中显示用户系统上的哪些文件。FileFilter 实例作为可选 typeFilter 参数的值传递给该方法。如果使用 FileFilter 实例，则会滤除 FileFilter 实例中未指定的扩展名和文件类型，即用户无法选择这些类型。如果未向方法传递任何 FileFilter 对象，则对话框中将显示所有文件。

可以采用以下两种方式之一使用 FileFilter 实例：

• 仅包含 文件扩展名的描述
• 包含 文件扩展名和 Macintosh 文件类型的描述

这两种格式不能在一个 browse 方法调用中互换。必须使用其中一种格式。

可以向 browse 方法传递一个或多个 FileFilter 实例，如下所示：

var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
 var docFilter:FileFilter = new FileFilter("Documents", "*.pdf;*.doc;*.txt");
 var myFileReference:FileReference = new FileReference();
 myFileReference.browse([imagesFilter, docFilter]);

或者在 AIR 应用程序中：

var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
 var docFilter:FileFilter = new FileFilter("Documents", "*.pdf;*.doc;*.txt");
 var myFile:File = new File();
 myFile.browseForOpen("Open", [imagesFilter, docFilter]);

var imagesFilter = new air.FileFilter("Images", "*.jpg;*.gif;*.png");
 var docFilter = new air.FileFilter("Documents", "*.pdf;*.doc;*.txt");
 var myFile = new air.File();
 myFile.browseForOpen("Open", [imagesFilter, docFilter]);

FileFilter.extension 属性中的扩展名列表用于筛选文件浏览对话框中显示的文件。该列表实际并不显示在对话框中；若要对用户显示文件类型，必须在描述字符串以及扩展名列表中列出文件类型