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://jakarta.apache.org/commons/fileupload/

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);   
			}   
			
			private function hsResultHandler(e:ResultEvent):void{   
				var xml:XML=e.result as XML;   
				filePath=xml.filepath.@path;   
			}   
			
			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:8080/FileUpload/upload.do"/>  
</fileUploadPath> 

 

 

UploadServlet

 

  

package com.test.upload;

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

评论

2 楼 hnmaque 2011-03-30  

老大 能不能给我发一份原文件啊 。。 或者告诉我 那个config.xml放在哪个位置、。



我是刚学新手  那份资料重要。。。
[e-mail]

1 楼 stuhack0303 2011-02-25  

能否发份源码给我？

先谢过，[e-mail]