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的滚动造成进度条进度错乱的问题都没能解决.不是很满意,但至少实现了基本的多文件带进度条上传.