Flex带进度条的多文件上传（基于Servlet）

Flex中实现的文件上传主要用到以下两个类：

      ●FileReference：FileReference 类提供了在用户计算机和服务器之间上载和下载文件的方法。操作系统对话框会提示用户选择要上载的文件或用于下载的位置。每个 FileReference 对象都引用用户磁盘上的一个文件并且具有一些属性，这些属性包含有关文件大小（size）、类型（type）、名称(name)、创建日期(creationDate)、修改日期(modificationDate)和创建者类型（仅限Macintosh）的信息。

     ●FileReferenceList 类提供了让用户选择一个或多个要上载的文件的方法。FileReferenceList 对象将用户磁盘上的一组本地文件（一个或多个文件）表示为 FileReference 对象的数组。有关详细信息以及有关 FileReference 对象和 FileReference 类（可与 FileReferenceList 一起使用）的重要注意事项，请参阅 FileReference 类。

     FileReferenceList 类的使用方法为：

     ①  将该类实例化：var myFileRef = new FileReferenceList();

     ②  调用FileReferenceList.browse() 方法，该方法将打开一个对话框，让用户选择一个或多个要上载的文件：myFileRef.browse();

     ③  在成功调用browse() 方法之后，使用 FileReference 对象数组来填充 FileReferenceList 对象的fileList 属性。

      ④  对fileList 数组中的每个元素调用FileReference.upload()。

     好了，现在开始实现文件上传，首先新建一个Application文件UploadFileDemo.mxml,代码如下所示：

<?xmlversionxmlversion="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/mx" minWidth="955" minHeight="600" applicationComplete="application_initializeHandler(event)">
    <fx:Script>
       <![CDATA[
           import ases.FileReferenceVo;

           import flashx.textLayout.events.SelectionEvent;

           import mx.collections.ArrayCollection;
           import mx.controls.Alert;
           import mx.events.CloseEvent;
           import mx.events.FlexEvent;
           import mx.rpc.events.FaultEvent;

           import spark.primitives.supportClasses.FilledElement;

            public varselectFileList:FileReferenceList=new FileReferenceList(); //存贮选择文件的数组
           [Bindable]
            public var fileArrayCollction:ArrayCollection=newArrayCollection();   //此数组用于保存文件信息
           [Bindable]
            public var arrayCollection:ArrayCollection=newArrayCollection();  //此数组用于DataGrid表格中显示
            public varurlRequest:URLRequest=new URLRequest("http://localhost:9080/javaAndFlex/FileUploadServlet");  //服务器类地址

           protected function application_initializeHandler(event:FlexEvent):void
           {
              // TODOAuto-generated method stub
              selectFileList.addEventListener(Event.SELECT,selectFileHandler);  //选择文件监听器
           }
           public function selectFiles():void{  //浏览文件处理事件
              //arrayCollection.removeAll();
              var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");  //选择的图片类型
              var docFilter:FileFilter = new FileFilter("Documents", "*.pdf;*.doc;*.txt");  //选择的文档类型
              var videoFilter:FileFilter= new FileFilter("Videos"," *.mp3;*.mp4;*.avi;*.rmvb");  //选择的视频类型
              selectFileList.browse([imagesFilter,docFilter,videoFilter]);
           }
           public function selectFileHandler(event:Event):void{  //处理选择文件
              for(var i:int=0;i<selectFileList.fileList.length;i++){
                  varfileReference:FileReference=FileReference(selectFileList.fileList[i]);
                  var object:Object=new Object();
                  object.fileRefer=fileReference;
                  object.fileName=fileReference.name;
                  object.fileType=fileReference.type.substr(1);
                  object.fileSize=(fileReference.size/1024).toFixed(2)+"KB";
                  fileArrayCollction.addItem(object);
                  arrayCollection.addItem(object);
              }
              fileDataGrid.dataProvider=arrayCollection;
           }

           protected function cancleUpload_clickHandler(event:MouseEvent):void  //清空按钮处理函数
           {
              // TODOAuto-generated method stub
              Alert.yesLabel="是的";
              Alert.cancelLabel="取消"
              if(fileArrayCollction.length<1){
                  Alert.show("没有要上传的文件！","提示");
                  return;
              }

              Alert.show("确实要清空文件上传列表吗?","提示",Alert.YES|Alert.CANCEL,this,yesOrCancleHandler,null,Alert.CANCEL);


           }
           public function yesOrCancleHandler(event:CloseEvent):void{
              if(event.detail==Alert.YES){
                  arrayCollection.removeAll();
                  fileArrayCollction.removeAll();
                  fileDataGrid.dataProvider=arrayCollection;

              }
           }

           protected function uploadFile_clickHandler(event:MouseEvent):void  //文件上传处理函数
           {
              // TODOAuto-generated method stub
              if(fileArrayCollction.length<1){
                  Alert.show("请选择要上传的文件！","提示");
                  return;
              }

              for(var i:int=0;i<fileArrayCollction.length;i++){
                  varfileReference:FileReference=FileReference(fileArrayCollction[i]['fileRefer']);

                  //fileUpLoad.upload(fileReference.data,fileReference.name);
                  fileReference.upload(urlRequest);
                  browseFile.enabled=false;  //将浏览文件按钮置灰
                  uploadFile.enabled=false;  //将上传按钮置灰
                  cancleUpload.enabled=false;  //将清空按钮置灰
                  if(i==fileArrayCollction.length-1){
                      fileReference.addEventListener(Event.COMPLETE,fileUploadCompleteHandler);
                  }
              }
           }
           protected function fileUploadCompleteHandler(event:Event):void{
              browseFile.enabled=true;
              uploadFile.enabled=true;
              cancleUpload.enabled=true;
              Alert.yesLabel="是";
              Alert.cancelLabel="否";
              Alert.show("文件已经上传完毕，是否接着上传？","提示",Alert.YES|Alert.CANCEL,this,chooseUploadFile,null,Alert.CANCEL);
           }
           protected function chooseUploadFile(event:CloseEvent):void{  //上传文件完毕后的处理函数
              if(event.detail==Alert.YES){
                  this.selectFiles();
              }

           }
       ]]>
    </fx:Script>
    <fx:Declarations>
       <!-- Place non-visualelements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Panel x="304" y="131" width="717" height="380" title="文件上传" fontSize="18">
       <mx:DataGrid  x="25" y="14" id="fileDataGrid"  fontWeight="bold" width="669" fontSize="16"height="261" >
           <mx:columns>
              <mx:DataGridColumn headerText="文件名" width="200" dataField="fileName" />
              <mx:DataGridColumn headerText="文件大小" width="100" dataField="fileSize" />
              <mx:DataGridColumn headerText="文件类型" width="100" dataField="fileType" />
              <mx:DataGridColumn headerText="上传进度"  >
                  <mx:itemRenderer>
                     <fx:Component>
                         <mx:HBox width="100%" height="100%" paddingLeft="10" >
                            <fx:Script>
                                <![CDATA[
                                   importmx.collections.ArrayCollection;

                                   protected functiondeleteFile_clickHandler(event:MouseEvent):void
                                   {
                                       // TODO Auto-generated method stub
                                       //
                                       var grid:Object =event.target.parent.parent.parent;
                                       var dp:ArrayCollection =ArrayCollection(grid.dataProvider);
                                       var index:int = dp.getItemIndex(data);
                                       outerDocument.arrayCollection.removeItemAt(index);
                                       dp.removeItemAt(index);
                                       grid.parent.refresh();
                                   }

                                   protected functionprogressBar_progressHandler(event:ProgressEvent):void
                                   {
                                       // TODO Auto-generated method stub
                                       deleteFile.visible=false;
                                   }

                                   protected function progressBar_completeHandler(event:Event):void
                                   {
                                       // TODO Auto-generated method stub
                                       deleteFile.visible=true;
                                   }



                                ]]>
                            </fx:Script>
                            <mx:ProgressBar minimum="0" chromeColor="13892729" maximum="100"progress="progressBar_progressHandler(event)" complete="progressBar_completeHandler(event)"     labelPlacement="center"  source="{data.fileRefer}" label="%3%%" id="progressBar"   width="90%" />
                            <mx:LinkButton id="deleteFile" width="10%" icon="@Embed('images/delete.png')"click="deleteFile_clickHandler(event)" />
                         </mx:HBox >
                     </fx:Component>
                  </mx:itemRenderer>
              </mx:DataGridColumn>
           </mx:columns>
       </mx:DataGrid>
       <mx:HBox paddingLeft="20" horizontalGap="35"paddingTop="8" x="218" y="295" width="100%" height="100%">
           <s:Button id="browseFile" height="31" label="浏览..." fontSize="18" click="selectFiles()"/>
           <s:Button id="uploadFile" height="31" label="上传" fontSize="18"click="uploadFile_clickHandler(event)"/>
           <s:Button id="cancleUpload" height="31" label="清空" fontSize="18"click="cancleUpload_clickHandler(event)"/>
       </mx:HBox>
    </s:Panel>
</s:Application>

     运行时页面

       新建一个servlet类FileUploadServlet，代码如下所示：

package com.ldfsoft.servlet;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

importorg.apache.commons.fileupload.FileItem;
importorg.apache.commons.fileupload.FileUploadException;
importorg.apache.commons.fileupload.disk.DiskFileItemFactory;
importorg.apache.commons.fileupload.servlet.ServletFileUpload;

public class FileUploadServlet extendsHttpServlet {

 @SuppressWarnings("unchecked")
@Override
protected void service(HttpServletRequestrequest, HttpServletResponse response)
                   throwsServletException, IOException {
         //TODO Auto-generated method stub
          response.setContentType("text/html;charset=utf-8");
          DiskFileItemFactory diskFileItemFactory=newDiskFileItemFactory();
          ServletFileUpload servletFileUpload=newServletFileUpload(diskFileItemFactory);
          servletFileUpload.setHeaderEncoding("utf-8");
          servletFileUpload.setSizeMax(1024*1024*1024);
          try {
                   List<FileItem>items=servletFileUpload.parseRequest(request);
                   Iterator<FileItem>iterator=items.iterator();
                   while(iterator.hasNext()){
                            FileItemitem=(FileItem) iterator.next();
                            if(!item.isFormField()){
                                     StringfileName=item.getName();
                                     Stringpath=getServletContext().getRealPath("/")+"files/"; //文件上传目录为根目录下面的files文件夹里
                                     System.out.println(fileName);
                                     FileuploadFile=new File(path+fileName);
                                     item.write(uploadFile);

                            }
                   }
         }catch (FileUploadException e) {
                   //TODO Auto-generated catch block
                   e.printStackTrace();
         }catch (Exception e) {
                   //TODO Auto-generated catch block
                   e.printStackTrace();
         }
         }

}

     注意，这个servlet文件需要两个jar包：commons-fileupload-1.2.1.jar和commons-io-1.3.2.jar，我这两个jar包是用Struts2.2.1.1版本里面的。

 开始选择文件：

       点击上传按钮后，文件开始上传，由于本地上传速度那是相当的快，所以小文件只是片刻之间的事。上传中“浏览”按钮，“上传”按钮，“清空”按钮都置灰，而且进度条后的删除按钮也都不可见：

         上传完毕后这3个按钮恢复正常并且会提示你是否继续上传：

       好了，这就是这两天的劳动的成果，觉得好就支持我一下吧，第一次做这个还是蛮幸苦的。