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 >
          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 >
          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 >
    
   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 >
                                  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" >
               mx:ProgressBar >
              
        
              
             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 GET and POST 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 proce***equest(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 {    
                proce***equest(request, response);    
        }    
         /** *//**    
         * Handles the HTTP POST method.    
         * @param request servlet request    
         * @param response servlet response    
         */    
         protected void doPost(HttpServletRequest request, HttpServletResponse response)    
                         throws ServletException, IOException {    
                 proce***equest(request, response);    
         }    
         /** *//**    
            * Returns a short description of the servlet.    
            */    
         public String getServletInfo() {    
                 return "Short description";    
         }    
}    

 

由于itemRenderer的问题,文件删除和DataGrid的滚动造成进度条进度错乱的问题都没能解决.不是很满意,但至少实现了基本的多文件带进度条上传.