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文件夹
