整的Flex多文件上传实例

文章出处：http://www.cnblogs.com/iihe602/archive/2009/08/03/1537906.html

下面的例子展示了用Flex上传文件的完整代码。

1. 基本实现的功能：
   • 一次选取多个文件上传
   • 上传过程中显示每个文件的进度
   • 如果是图片，可以上传之前进行预览
   • 可以选择逐个文件上传，也可以选择同时上传多个文件，这样就是对服务器压力稍微大一些
2. 技术点：
   • 闭包方法（在c#里，也叫匿名委托方法），根据我的体会，如果不使用闭包方法，更新进度条会是一个比较麻烦的问题，除非另外编写一个类，这个问题稍后再研究
   • DataGrid中需要用到itemRenderer，从而在每行都显示进度条和删除、取消按钮
3. 软件环境
   • Flex Builder 3
   • Flash player 10
     • Flash player 9 （特别说明：如果使用这个版本的flashPlayer，FileFerence没有load方法和data属性，也就无法实现本地预览图片，请去掉load和data有关调用即可）
     • 在Flex Builder 3中默认是Flash Player 9，只能自己修改一下配置文件，切换到10，方法请参考 Targeting Flash Player 10

还是先看一下程序吧，稍后再看代码

fileUpload.xml

<?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/FlexJinDu/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>

服务器端代码 ：

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; 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://files//"; // 限制文件的上传大小 private int maxPostSize = 100 * 1024 * 1024; //最大100M public UploadFile() { super(); } public void destroy() { super.destroy(); } 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>UploadFile</servlet-class> </servlet> <servlet-mapping> <servlet-name>UploadFile</servlet-name> <url-pattern>/UploadFile</url-pattern> </servlet-mapping>