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