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项目工程，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);
				}
			}

			/**
			 * 浏览按钮事件函数
			 */
			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）上传文件之前服务器file文件夹

（4）上传文件之后服务器file文件夹