flex多文件带进度条上传

这个我做的是弹出的TitleWindow 主页代码简单,就是一个按钮 <? 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/halo" minWidth ="1024" minHeight ="768" >    < s:layout >      < s:BasicLayout />    </ s:layout >    < fx:Script >     <![CDATA[       import com.lichen.component.upload;       import mx.managers.PopUpManager;       protected function button1_clickHandler(event:MouseEvent):void       {         var win:upload=upload(PopUpManager.createPopUp(this,upload,true));         PopUpManager.centerPopUp(win);       }     ]]>    </ fx:Script >    < s:Button x ="36" y ="47" label ="按钮" click ="button1_clickHandler(event)" /> </ s:Application >   弹出的 TitleWindow是核心 <? xml version ="1.0" encoding ="utf-8" ?> < mx:TitleWindow xmlns:fx ="http://ns.adobe.com/mxml/2009" xmlns:s ="library://ns.adobe.com/flex/spark" xmlns:mx ="library://ns.adobe.com/flex/halo"     layout ="absolute" title ="上传文件" color ="#7dbded"          width ="609" height ="460" baseColor ="#E0ECFF" borderColor ="#E0ECFF" backgroundColor ="haloBlue" backgroundAlpha ="0.1" contentBackgroundAlpha ="0.1"          borderVisible ="true" dropShadowVisible ="true"              showCloseButton ="true" close ="PopUpManager.removePopUp(this)"          fontFamily ="Arial" fontSize ="14" fontWeight ="bold" verticalAlign ="top" initialize ="init();" >    < fx:Script >     <![CDATA[       import mx.collections.ArrayCollection;       import mx.controls.Alert;       import mx.controls.ProgressBar;       import mx.managers.PopUpManager;                private var fileList:FileReferenceList = new FileReferenceList();  //多选文件的list       private var urlRequest:URLRequest = new URLRequest("http://192.168.1.205:9218/productshowshow/upload");    //处理文件上传的servlet       [Bindable]       public var selectedFiles: ArrayCollection = new ArrayCollection([]);    //多选的文件分离成文件数组       private var fileListSize:uint=1;       /**         * 初始化         */       public function init():void{         fileList.addEventListener(Event.SELECT,fileSelectHandler);       }       /**         *监听文件选择的处理函数         */       private function fileSelectHandler(event: Event): void       {         if(fileList.fileList.length>10){           Alert.show("一次最多只能上传10个文件");         }else{           for(var i:int=0;i < fileList.fileList.length;i++){             var f:FileReference = FileReference(fileList.fileList[i]);                 var obj:Object= new Object();             obj.fileName = f.name;             obj.fileSize = f.size/1024;             obj.fileType = f.type;             obj.fileRefrence = f;             fileListSize+=f.size;             selectedFiles.addItem(obj);           }           if( fileListSize/(1024*1024) >100 ){             selectedFiles.removeAll();             Alert.show("文件总大小应小于100M");           }         } //        for each (var file: FileReference in fileList.fileList) //        { //          selectedFiles.addItem(file); //        }       }       /**         * 点击"浏览"按钮-->选择文件         */       protected function selectFile():void       {         //浏览文件,因为是FileReferenceList所以可以多选. 并用FileFilter过滤文件类型.         fileList.browse([new FileFilter("图片文件 (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png"),new FileFilter("所有文件 (*.*)","*.*")]);       }       /**         * 逐个上传文件         */       private function uploadHandler(event:MouseEvent):void{         var file:FileReference;         for(var i:int = 0 ;i < selectedFiles.length;i++){           file = FileReference(selectedFiles[i].fileRefrence);           file.upload(urlRequest);         }       }       /**         * 上传一个文件,监听文件上传完成事件,递归调用.         */       private function doSingleUploadFile():void{         if(selectedFiles.length >10){           selectedFiles.removeAll();           Alert.show("一次最多只能上传10个文件");         }else if( fileListSize/(1024*1024)>100 ){           selectedFiles.removeAll();           Alert.show("文件总大小应小于100M");         }else{           if (fileList.fileList.length > 0){             var f: FileReference = fileList.fileList.shift() as FileReference;             f.addEventListener(Event.COMPLETE, doSingleUploadFileComplete);             f.upload(urlRequest);           }         }       }       /**         * 一个文件上传完成事件的处理函数,递归执行上传下一个文件.         */       private function doSingleUploadFileComplete(event: Event):void{         var file: FileReference = event.target as FileReference;         file.removeEventListener(Event.COMPLETE, doSingleUploadFileComplete);         doSingleUploadFile();       }       public function removeFile(f: FileReference): void       {         var index: int = selectedFiles.getItemIndex(f);         if (index != -1)           selectedFiles.removeItemAt(index);       }              ]]>    </ fx:Script >    < fx:Declarations >     <!-- Place non-visual elements (e.g., services, value objects) here -->    </ fx:Declarations >    < mx:LinkButton x ="10" y ="23" textRollOverColor ="purple" textSelectedColor ="haloBlue"     label ="选择本地文件" cornerRadius ="7" fontFamily ="中易宋体" fontSize ="14" fontWeight ="bold" fontStyle ="normal" textDecoration ="none" textAlign ="center"              click ="selectFile()" />    < mx:DataGrid x ="12" y ="50" id ="dg" width ="587" height ="291" color ="#7dbded" contentBackgroundColor ="#E0ECFF" baseColor ="#E0ECFF"          dataProvider ="{selectedFiles}" >      < mx:columns >        < mx:DataGridColumn headerText ="文件名" dataField ="fileName" width ="150" />        < mx:DataGridColumn headerText ="大小(kb)" dataField ="fileSize" width ="100" />        < mx:DataGridColumn headerText ="类型" dataField ="fileType" width ="70" />        < mx:DataGridColumn headerText ="上传状态" dataField =""    width="230" >          < mx:itemRenderer >            < fx:Component >              < mx:HBox width ="130" paddingLeft ="2" horizontalGap ="2" >                < fx:Script >                 <![CDATA[                   override public function set data(value:Object):void{                     super.data = value;                     data.fileRefrence.addEventListener(ProgressEvent.PROGRESS,progressHandler);                     data.fileRefrence.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,fini);                   }                                        private function progressHandler(event:ProgressEvent):void{ //                    progress.setProgress(event.bytesLoaded,data.fileRefrence.size); //                    Alert.show("hahah"); //                    progress.setProgress(event.bytesLoaded, event.bytesTotal);                     var procent:uint=event.bytesLoaded/event.bytesTotal*100; //                    progress.label=procent+"###"; //                    if(procent==100){                       progress.enabled=false; //                      progress.label="完成啦"; //                    } //                    data.fileRefrence.removeEventListener(ProgressEvent.PROGRESS,progressHandler);                   }                                            public function fini(event: DataEvent):void{                     progress.visible=true;                     progress.label="完成";                     data.fileRefrence.removeEventListener(DataEvent.UPLOAD_COMPLETE_DATA,fini);                   }                 ]]>                </ fx:Script >                < mx:ProgressBar id ="progress" width ="80%"                            minimum ="0" maximum ="100" source ="{data.fileRefrence}"                        labelPlacement ="center" ><!-- 进度条显示文字    source="{data.fileRefrence}"    progress="progress.label='%3%%';"    label="%3%%"    -->                </ mx:ProgressBar >               <!-- 取消按钮    source="{data.fileRefrence}"               <mx:LinkButton width="20" toolTip="取消上传" click="cancel()"               label="取消" icon="@Embed('image/cancel.png')">               <fx:Script>               <![CDATA[               private function cancel():void{               data.fileRefrence.cancel();               progress.label = "已取消";               }               ]]>               </fx:Script>               </mx:LinkButton>               -->                        <!--               <mx:LinkButton width="20" click="deleteItem(event)"                              toolTip="从列表中删除" icon="@Embed('image/delete.png')">                 <fx:Script>                   <![CDATA[                     import mx.collections.ArrayCollection;                                          private function deleteItem(event:MouseEvent):void {                                                var s:ArrayCollection= this.parentDocument.selectedFiles as ArrayCollection;    //取全局变量                       var index:int=s.getItemIndex(data);                       if (index != -1){                         s.removeItemAt(index);                       }                     }                   ]]>                 </fx:Script>               </mx:LinkButton>               -->              </ mx:HBox >            </ fx:Component >          </ mx:itemRenderer >        </ mx:DataGridColumn >      </ mx:columns >    </ mx:DataGrid >    < s:Button x ="523" y ="373" label ="上传" id ="btn_upload"     lineHeight ="0"              click ="doSingleUploadFile();" /> </ mx:TitleWindow >   文件上传服务器端(Java) package com.test; 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:\\";              // 限制文件的上传大小              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";              }     }       由于itemRenderer的问题,文件删除和DataGrid的滚动造成进度条进度错乱的问题都没能解决.不是很满意,但至少实现了基本的多文件带进度条上传.