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

本文转自chainli 51CTO博客，原文链接：http://blog.51cto.com/lichen/238628，如需转载请自行联系原作者