flex 多文件上传

主文件mxml:

 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left" fontSize="12" initialize="init()" viewSourceURL="srcview/index.html"> <mx:NumberFormatter id="filesizeFormatter" useThousandsSeparator="true"/> <mx:Script> <!--[CDATA[ import mx.events.CollectionEvent; import mx.formatters.NumberFormatter; import mx.formatters.CurrencyFormatter; import mx.collections.ArrayCollection; import mx.controls.Alert; private var fileRefs: FileReferenceList = new FileReferenceList(); //这个地址是我项目的服务器地址 private var urlrequest: URLRequest = new URLRequest(http://localhost:8080/FlexNet/UploadFile); [Bindable] private var selectedFiles: ArrayCollection = new ArrayCollection([]); private var singleThreadFiles: Array = []; [Bindable] private var useSingleThread: Boolean = true; private function init(): void { Security.allowDomain("*"); fileRefs.addEventListener(Event.SELECT, fileSelectHandler); fileRefs.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler); fileRefs.addEventListener(Event.COMPLETE, completeHandler); addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler); } private function selectFile(): void { fileRefs.browse([new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png"), new FileFilter("所有文件(*.*)", "*.*") ]); } private function fileSelectHandler(event: Event): void { for each (var f: FileReference in fileRefs.fileList) { selectedFiles.addItem(f); } } private function uploadFile(): void { for each (var f: FileReference in selectedFiles) { try { f.upload(urlrequest); } catch (e: Error) { Alert.show(e.message); } } } private function singleThreadUploadFile(): void { //FIFO：逐个从列表中取出，进行同步上传 if (singleThreadFiles.length > 0) { var f: FileReference = singleThreadFiles.pop() as FileReference; f.addEventListener(Event.COMPLETE, doSingleUploadFileComplete); f.upload(urlrequest); } } private function doSingleUploadFileComplete(event: Event): void { var f: FileReference = event.target as FileReference; f.removeEventListener(Event.COMPLETE, doSingleUploadFileComplete); singleThreadUploadFile(); } private function ioErrorHandler(e:IOErrorEvent): void { Alert.show(e.text); } private function completeHandler(e: Event): void { img.source = e.target.data; } private function showImage(e: Event): void { var f: FileReference = (e.target as DataGrid).selectedItem as FileReference; f.addEventListener(Event.COMPLETE, completeHandler); //f.load(); } public function removeFile(f: FileReference): void { var index: int = selectedFiles.getItemIndex(f); if (index != -1) selectedFiles.removeItemAt(index); } ]]> </mx:Script> <mx:VBox> <mx:HBox width="100%"> <mx:Button id="selectFileButton" label="浏览" click="selectFile()"/> <mx:Box width="100%" horizontalAlign="right"> <mx:Button click="selectedFiles.removeAll();" label="清空"/> </mx:Box> </mx:HBox> <mx:DataGrid id="files" dataProvider="{selectedFiles}" change="showImage(event)"> <mx:columns> <mx:DataGridColumn width="150" headerText="文件名" dataField="name" /> <mx:DataGridColumn headerText="大小(字节)" dataField="size"> <mx:itemRenderer> <mx:Component> <mx:Label text="{outerDocument.filesizeFormatter.format(data.size)}" textAlign="right"/> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> <mx:DataGridColumn headerText="上传进度" width="300"> <mx:itemRenderer> <mx:Component> <mx:HBox fontSize="10" fontWeight="normal" fontThickness="1"> <mx:Script> <![CDATA[ import flash.profiler.showRedrawRegions; import mx.controls.Alert; import mx.controls.ProgressBar; private function initProgressBar(event: Event): void { //使progressbar与file关联，从而产生进度条 var pb: ProgressBar = event.target as ProgressBar; pb.label = "%3%%"; pb.setProgress(0, 100); var f: FileReference = data as FileReference; //使用闭包方法，更新进度条 f.addEventListener(ProgressEvent.PROGRESS, function(event: ProgressEvent): void { pb.setProgress(event.bytesLoaded, event.bytesTotal); } ); f.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, function (event: DataEvent): void { //服务器端一定要返回数据，否则，这个方法就不起作用了 pb.label = event.data; } ); } ]]> </mx:Script> <mx:ProgressBar verticalCenter="true" width="100%" paddingLeft="5" paddingRight="5" maximum="100" minimum="0" labelPlacement="center" mode="manual" label="%3%%" textAlign="left" creationComplete="initProgressBar(event)"/> <mx:LinkButton label="Cancel"> <mx:click> <![CDATA[ var f: FileReference = data as FileReference; f.cancel(); ]]> </mx:click> </mx:LinkButton> <mx:LinkButton label="Delete"> <mx:click> <![CDATA[ var f: FileReference = data as FileReference; outerDocument.removeFile(f); ]]> </mx:click> </mx:LinkButton> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:VBox> <mx:HBox> <mx:Button label="上传"> <mx:click> <![CDATA[ if (useSingleThread) { //逐个上传 singleThreadFiles = selectedFiles.toArray().concat(); singleThreadFiles.reverse(); singleThreadUploadFile(); } else { //多个文件同时上传 uploadFile(); } ]]--> </mx:click> </mx:Button> <mx:CheckBox id="checkboxSingleThread" label="同时上传多个文件" selected="{!useSingleThread}" change="useSingleThread = !checkboxSingleThread.selected"/> </mx:HBox> <mx:Image id="img" width="400" height="300"/> </mx:Application>

java代码：UploadFile.java

package com.airflex.util; import java.io.File; 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.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; /** * @author Administrator * */ /** * @author Administrator * */ /** * @author Administrator * */ /** * @author Administrator * */ public class UploadFile extends HttpServlet { private static final long serialVersionUID = 5425836142860976977L; /** */ /** * 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://workspace//FlexNet//flex_src//assets//projectImg//"; // 限制文件的上传大小 private int maxPostSize = 100 * 1024 * 1024; // 最大100M public UploadFile() { super(); } public void destroy() { super.destroy(); } /** * @param request * @param response * @throws ServletException * @throws IOException */ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("Access !"); response.setContentType("text/html;charset=UTF-8"); // 保存文件到服务器中 DiskFileItemFactory factory = new DiskFileItemFactory(); factory.setSizeThreshold(4096); ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("utf-8"); 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)); response.getWriter().write("上传成功。"); } catch (Exception e) { e.printStackTrace(); response.getWriter().write(e.getMessage()); } } } } catch (FileUploadException e) { e.printStackTrace(); response.getWriter().write(e.getMessage()); System.out.println(e.getMessage() + "结束"); } } 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"; } }

然后在web.xml中加入：

<servlet> <servlet-name>UploadFile</servlet-name> <servlet-class>com.airflex.util.UploadFile</servlet-class> </servlet> <servlet-mapping> <servlet-name>UploadFile</servlet-name> <url-pattern>/UploadFile</url-pattern> </servlet-mapping>