Flex和Servlet结合上传文件

Flex和Servlet结合上传文件

1、准备工作

（1）下载文件上传的组件，commons-fileupload-1.3.1.jar

（2）下载文件输入输出jar，commons-io-2.4.jar

（3）有关servlet的jar包，servlet-api.jar

2、正式开发

（1）新建一个web项目project，FlexFileUpload

（2）在src新建一个上传文件的servlet

FlexFileUploadServlet.java：

package com.you.upload.servlet;

import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
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.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class FlexFileUploadServlet extends HttpServlet 
{
	/**
	 * @Fields serialVersionUID:序列化
	 */
	private static final long serialVersionUID = -6839362803884547766L;

	/**
	 * Constructor of the object.
	 */
	public FlexFileUploadServlet() 
	{
		super();
	}

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy() 
	{
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	/**
	 * The doGet method of the servlet. <br>
	 * 
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request
	 *            the request send by the client to the server
	 * @param response
	 *            the response send by the server to the client
	 * @throws ServletException
	 *             if an error occurred
	 * @throws IOException
	 *             if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException 
	{
		super.doGet(request, response);
		doPost(request, response);
	}

	/**
	 * The doPost method of the servlet. <br>
	 * 
	 * This method is called when a form has its tag value method equals to
	 * post.
	 * 
	 * @param request
	 *            the request send by the client to the server
	 * @param response
	 *            the response send by the server to the client
	 * @throws ServletException
	 *             if an error occurred
	 * @throws IOException
	 *             if an error occurred
	 */
	@SuppressWarnings("rawtypes")
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException 
	{
		/**
		 * 防止中文乱码
		 */
		response.setContentType("text/html;charset=gb2312");
		/**
		 * 设置编码格式
		 */
		response.setCharacterEncoding("utf-8");
		/**
		 * 创建一个工厂类
		 */
		FileItemFactory factory = new DiskFileItemFactory();
		/**
		 * 上传对象
		 */
		ServletFileUpload upload = new ServletFileUpload(factory);
		try {
			List items = upload.parseRequest(request);
			Iterator it = items.iterator();
			while (it.hasNext()) 
			{
				FileItem item = (FileItem) it.next();
				/**
				 * 推断是表单域
				 */
				if (item.isFormField()) 
				{
					System.out.println("一个表单域");
				} 
				else 
				{
					/**
					 * 处理文件上传
					 */
					System.out.println("不是一个表单域");
					String fileName = item.getName();
					byte[] data = item.get();
					/**
					 * 获取文件上传路径
					 */
					String file = getServletConfig().getInitParameter("file");
					String fileFolderName = getServletContext().getRealPath(file + "\\" + fileName);
					try {
						FileOutputStream fileOutSt = new FileOutputStream(fileFolderName);
						try 
						{
							fileOutSt.write(data);
							fileOutSt.close();
						} 
						catch (IOException exception) 
						{
							exception.printStackTrace();
						}
					} 
					catch (FileNotFoundException exception) 
					{
						exception.printStackTrace();
					}
				}
			}
		} 
		catch (FileUploadException exception) 
		{
			exception.printStackTrace();
		}
	}

	/**
	 * Initialization of the servlet. <br>
	 * 
	 * @throws ServletException
	 *             if an error occurs
	 */
	public void init() throws ServletException 
	{
		// Put your code here
	}

}

（3）配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>FlexFileUploadServlet</servlet-name>
    <servlet-class>com.you.upload.servlet.FlexFileUploadServlet</servlet-class>
    <init-param>
        <description>上传文件暂时路径</description>
        <param-name>file</param-name>
        <param-value>file</param-value>
    </init-param>
  </servlet>

  <servlet-mapping>
    <servlet-name>FlexFileUploadServlet</servlet-name>
    <url-pattern>/FlexFileUploadServlet</url-pattern>
  </servlet-mapping>	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

（4）打开Flash Builder，新建Flex项目

FileUpload.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"
			   width="100%" height="100%" creationComplete="initHandler()"
			   fontSize="12" fontWeight="bold" accentColor="#94E1ED">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		Panel {  
			borderStyle: solid;  
			borderColor: #ff0000;  
			borderAlpha: 0.5;  
			borderThickness: 2;  
			roundedBottomCorners: true;  
			cornerRadius: 10;  
			headerHeight: 50;  
			backgroundAlpha: 0.5;  
			highlightAlphas: 0.4, 0.24;  
			headerColors: #cccc00, #cccc00;  
			footerColors: #660033, #4217c2;  
			backgroundColor: #00ffff;  
			dropShadowEnabled: true;  
			shadowDistance: 1;  
			titleStyleName: "mypanelTitle";  
		}  
		
		.mypanelTitle {  
			letterSpacing: 1;  
			color: #6600cc;  
			textAlign: left;  
			fontFamily: Trebuchet MS;  
			fontSize: 16;  
			fontWeight: bold;  
			fontStyle: italic;  
			textDecoration: underline;  
		}  
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			
			[Bindable]
			//提示用户选择要上载的文件或用于下载的位置
			private var fileRefer:FileReference;
			
			[Bindable]
			//推断文件是否选中
			private var fileSelected:Boolean;
			
			[Bindable]
			//上传文件暂时路径
			private var serverURL:String = "http://localhost:8686/FlexFileUpload/FlexFileUploadServlet";
			
			private var stat:Array = new Array();
			
			[Bindable]
			private var statusArray:ArrayCollection = new ArrayCollection();

			/**
			 * 初始化函数
			 */
			protected function initHandler():void
			{
				fileRefer = new FileReference();
				fileRefer.addEventListener(Event.SELECT, onFileSelect); 
				fileRefer.addEventListener(ProgressEvent.PROGRESS,onUploadProgress); 
				fileRefer.addEventListener(Event.COMPLETE, onUploadComplete); 
				fileRefer.addEventListener(IOErrorEvent.IO_ERROR, onUploadError); 
				fileRefer.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onUploadError); 
			}
			
			/**
			 * 选择文件事件函数
			 */
			private function onFileSelect(event:Event):void 
			{ 
				fileSelected = true; 
				fileTxt.text = fileRefer.name; 
				stat.push({status:"准备上传 "+fileTxt.text});            
				statusArray = new ArrayCollection(stat); 
			} 
			
			/**
			 * 正在上传事件函数 
			 */
			private function onUploadProgress(event:ProgressEvent):void 
			{ 
				stat.push({status:"进度.."+((event.bytesLoaded * 100) / event.bytesTotal).toString()+"%"}); 
				statusArray = new ArrayCollection(stat); 
			} 
			
			/**
			 * 上传全然事件函数 
			 */
			private function onUploadComplete(event:Event):void 
			{ 
				stat.push({status:"上传成功!"}); 
				statusArray = new ArrayCollection(stat); 
			} 
			
			/**
			 * 上传出现错误事件函数 
			 */
			private function onUploadError(event:Event):void 
			{ 
				if (event is IOErrorEvent) 
				{ 
					stat.push({status:"输入输出错误: "+(event as IOErrorEvent).text.toString()}); 
					statusArray = new ArrayCollection(stat); 
				} 
				else if (event is SecurityErrorEvent) 
				{ 
					stat.push({status:"安全错误: "+(event as IOErrorEvent).text.toString()}); 
					statusArray = new ArrayCollection(stat); 
				} 
			}

			/**
			 * 浏览button事件函数 
			 */
			protected function uploadBtn_clickHandler(event:MouseEvent):void
			{
				fileRefer.browse(); 
			}

			/**
			 * 上传文件事件函数 
			 */
			protected function uploadClickHandler(event:MouseEvent):void
			{
				if (!fileSelected || (urlTxt.text.length == 0)) 
				{ 
					Alert.show("请选择一个文件并选择路径"); 
					return; 
				} 
				var urlRequest:URLRequest = new URLRequest(urlTxt.text); 
				fileRefer.upload(urlRequest);
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（比如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<s:Panel title="上传文件" horizontalCenter="0" verticalCenter="0" width="400" height="400" borderColor="#FFFFFF" backgroundColor="#D1EEEE">
		<mx:VBox width="30%" height="40%" horizontalAlign="left" horizontalGap="0" paddingTop="5" paddingLeft="12">
			<mx:HBox width="100%" height="10%" horizontalAlign="left">
				<mx:VBox width="30%" height="100%" horizontalAlign="right" verticalAlign="middle">
					<s:Label text="文件名称：" width="80" fontWeight="bold"></s:Label>
				</mx:VBox>
				<mx:VBox width="40%" height="100%" horizontalAlign="left">
					<s:TextInput id="fileTxt" width="200" editable="false" toolTip="选择上传文件"/>
				</mx:VBox>
				<mx:VBox width="30%" height="100%" horizontalAlign="left" verticalAlign="middle">
					<s:Button id="uploadBtn" label="浏览..." click="uploadBtn_clickHandler(event)" width="80"/>
				</mx:VBox>
			</mx:HBox>
			<mx:HBox width="100%" height="10%" horizontalAlign="left">
				<mx:VBox height="100%" width="30%" horizontalAlign="left" verticalAlign="middle">  
					<s:Label text="服务器路径：" width="80" fontWeight="bold"></s:Label>  
				</mx:VBox>  
				<mx:VBox height="100%" width="70%" horizontalAlign="left">  
					<s:TextInput id="urlTxt" width="290" text="{serverURL}"/>  
				</mx:VBox>  
			</mx:HBox>
			<mx:HBox height="10%" width="100%" horizontalAlign="center">  
				<s:Button id="uploadBut" label="上传文件" click="uploadClickHandler(event)" enabled="{fileSelected}" />  
			</mx:HBox>  
			<mx:HBox height="70%" width="100%" horizontalAlign="center">  
				<mx:DataGrid id="statusDG" width="100%" height="250" dataProvider="{statusArray}" variableRowHeight="true" wordWrap="true">  
					<mx:columns>      
						<mx:DataGridColumn dataField="status" headerText="上传文件状态" paddingLeft="0" paddingRight="0">  
						</mx:DataGridColumn>  
					</mx:columns>  
				</mx:DataGrid>  
			</mx:HBox>  
		</mx:VBox>
	</s:Panel>
</s:Application>

3、执行结果

（1）初始化时

（2）上传文件

（3）上传文件之前serverfile目录

（4）上传文件之后serverfile目录