flex上传功能的实现

 本文参考网上一些文章而写，服务端代码来自网上。

关于flex上传功能的实现依赖于FileReference类。该类实例对象的创建有两种方法：使用var myFileReference = new FileReference(); FileReferenceList.browse()。使用browse()或者FileReference.browse()方法可以打开上传窗口。

下面的代码取材于网上，一个简单的上传组件代码，包括了监听ProgressEvent，选择的selectEvent和完成的completeEvent。为了避免硬编码，将urlRequest路径配置在一个xml里面，使用了httpservice进行请求，将结果用于UrlRequest的参数。

 <?xml version="1.0" encoding="UTF-8"?> <fileUploadPath> <filepath id="filepathConfig" path="http://localhost:8080/fileupload/FileUploaded"/> </fileUploadPath>

主应用程序代码：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns="*" creationComplete="init();"> <mx: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 allTypes:Array=new Array(imageTypes); // 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("上传失败"); } } } ]]--> </mx: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" themeColor="#F20D7A" minimum="0" visible="true" maximum="100" label="当前进度: 0%" direction="right" mode="manual" width="200"/> <mx:Button label="上传文件" click="upload();"/> </mx:VBox> </mx:Canvas> <mx:HTTPService id="httpService" resultFormat="e4x"/> </mx:Application>

在服务器端应该做相应的配置:在web.xml中拦截请求，将相应的请求发到相应的servelet进行处理：

<servlet> <servlet-name>FileUploaded</servlet-name> <servlet-class>FileUploaded</servlet-class> </servlet> <servlet-mapping> <servlet-name>FileUploaded</servlet-name> <url-pattern>/FileUploaded</url-pattern> </servlet-mapping>

FileUpload相应的servlete类代码：

import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.util.Iterator; import java.util.List; import javax.faces.application.Application; 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; /** * * @author crystal */ public class FileUploaded extends HttpServlet { /** * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods. * @param request servlet request * @param response servlet response */ // 定义文件的上传路径 private String uploadPath = "d://uploadtest//"; // 限制文件的上传大小 private int maxPostSize = 100 * 1024 * 1024; public FileUploaded() { super(); } public void destroy() { super.destroy(); } protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("Access !"); // uploadPath=request.getSession().getServletContext().getRealPath(""); System.out.println(uploadPath); 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() + "结束"); } } // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code."> /** * Handles the HTTP <code>GET</code> method. * @param request servlet request * @param response servlet response */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Handles the HTTP <code>POST</code> method. * @param request servlet request * @param response servlet response */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Returns a short description of the servlet. */ public String getServletInfo() { return "Short description"; } // </editor-fold> }

另外还需要下载两个jar包：commons-fileupload-1.2.1.jar 和commons-io-1.4.jar。