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,代码如下所示：

  1. <?xmlversionxmlversion="1.0" encoding="utf-8"?>  
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
  3.               xmlns:s="library://ns.adobe.com/flex/spark"  
  4.               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" applicationComplete="application_initializeHandler(event)">  
  5.     <fx:Script>  
  6.        <![CDATA[ 
  7.            import ases.FileReferenceVo; 
  8.            
  9.            import flashx.textLayout.events.SelectionEvent; 
  10.            
  11.            import mx.collections.ArrayCollection; 
  12.            import mx.controls.Alert; 
  13.            import mx.events.CloseEvent; 
  14.            import mx.events.FlexEvent; 
  15.            import mx.rpc.events.FaultEvent; 
  16.            
  17.            import spark.primitives.supportClasses.FilledElement; 
  18.            
  19.             public varselectFileList:FileReferenceList=new FileReferenceList(); //存贮选择文件的数组 
  20.            [Bindable] 
  21.             public var fileArrayCollction:ArrayCollection=newArrayCollection();   //此数组用于保存文件信息 
  22.            [Bindable] 
  23.             public var arrayCollection:ArrayCollection=newArrayCollection();  //此数组用于DataGrid表格中显示 
  24.             public varurlRequest:URLRequest=new URLRequest("http://localhost:9080/javaAndFlex/FileUploadServlet");  //服务器类地址 
  25.            
  26.            protected function application_initializeHandler(event:FlexEvent):void 
  27.            { 
  28.               // TODOAuto-generated method stub 
  29.               selectFileList.addEventListener(Event.SELECT,selectFileHandler);  //选择文件监听器 
  30.            } 
  31.            public function selectFiles():void{  //浏览文件处理事件 
  32.               //arrayCollection.removeAll(); 
  33.               var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");  //选择的图片类型 
  34.               var docFilter:FileFilter = new FileFilter("Documents", "*.pdf;*.doc;*.txt");  //选择的文档类型 
  35.               var videoFilter:FileFilter= new FileFilter("Videos"," *.mp3;*.mp4;*.avi;*.rmvb");  //选择的视频类型 
  36.               selectFileList.browse([imagesFilter,docFilter,videoFilter]);  
  37.            } 
  38.            public function selectFileHandler(event:Event):void{  //处理选择文件 
  39.               for(var i:int=0;i<selectFileList.fileList.length;i++){ 
  40.                   varfileReference:FileReference=FileReference(selectFileList.fileList[i]); 
  41.                   var object:Object=new Object(); 
  42.                   object.fileRefer=fileReference; 
  43.                   object.fileName=fileReference.name; 
  44.                   object.fileType=fileReference.type.substr(1); 
  45.                   object.fileSize=(fileReference.size/1024).toFixed(2)+"KB"; 
  46.                   fileArrayCollction.addItem(object); 
  47.                   arrayCollection.addItem(object); 
  48.               } 
  49.               fileDataGrid.dataProvider=arrayCollection; 
  50.            } 
  51.            
  52.            protected function cancleUpload_clickHandler(event:MouseEvent):void  //清空按钮处理函数 
  53.            { 
  54.               // TODOAuto-generated method stub 
  55.               Alert.yesLabel="是的"; 
  56.               Alert.cancelLabel="取消" 
  57.               if(fileArrayCollction.length<1){ 
  58.                   Alert.show("没有要上传的文件！","提示"); 
  59.                   return; 
  60.               } 
  61.            
  62.               Alert.show("确实要清空文件上传列表吗?","提示",Alert.YES|Alert.CANCEL,this,yesOrCancleHandler,null,Alert.CANCEL); 
  63.               
  64.               
  65.            } 
  66.            public function yesOrCancleHandler(event:CloseEvent):void{ 
  67.               if(event.detail==Alert.YES){ 
  68.                   arrayCollection.removeAll(); 
  69.                   fileArrayCollction.removeAll(); 
  70.                   fileDataGrid.dataProvider=arrayCollection; 
  71.                   
  72.               } 
  73.            } 
  74.            
  75.            protected function uploadFile_clickHandler(event:MouseEvent):void  //文件上传处理函数 
  76.            { 
  77.               // TODOAuto-generated method stub 
  78.               if(fileArrayCollction.length<1){ 
  79.                   Alert.show("请选择要上传的文件！","提示"); 
  80.                   return; 
  81.               } 
  82.               
  83.               for(var i:int=0;i<fileArrayCollction.length;i++){ 
  84.                   varfileReference:FileReference=FileReference(fileArrayCollction[i]['fileRefer']); 
  85.                   
  86.                   //fileUpLoad.upload(fileReference.data,fileReference.name); 
  87.                   fileReference.upload(urlRequest); 
  88.                   browseFile.enabled=false;  //将浏览文件按钮置灰 
  89.                   uploadFile.enabled=false;  //将上传按钮置灰 
  90.                   cancleUpload.enabled=false;  //将清空按钮置灰 
  91.                   if(i==fileArrayCollction.length-1){ 
  92.                       fileReference.addEventListener(Event.COMPLETE,fileUploadCompleteHandler); 
  93.                   } 
  94.               } 
  95.            } 
  96.            protected function fileUploadCompleteHandler(event:Event):void{ 
  97.               browseFile.enabled=true; 
  98.               uploadFile.enabled=true; 
  99.               cancleUpload.enabled=true; 
  100.               Alert.yesLabel="是"; 
  101.               Alert.cancelLabel="否"; 
  102.               Alert.show("文件已经上传完毕，是否接着上传？","提示",Alert.YES|Alert.CANCEL,this,chooseUploadFile,null,Alert.CANCEL); 
  103.            } 
  104.            protected function chooseUploadFile(event:CloseEvent):void{  //上传文件完毕后的处理函数 
  105.               if(event.detail==Alert.YES){ 
  106.                   this.selectFiles(); 
  107.               } 
  108.            
  109.            } 
  110.        ]]>  
  111.     </fx:Script>  
  112.     <fx:Declarations>  
  113.        <!-- Place non-visualelements (e.g., services, value objects) here -->  
  114.     </fx:Declarations>  
  115.     <s:Panel x="304" y="131" width="717" height="380" title="文件上传" fontSize="18">  
  116.        <mx:DataGrid  x="25" y="14" id="fileDataGrid"  fontWeight="bold" width="669" fontSize="16"height="261" >  
  117.            <mx:columns>  
  118.               <mx:DataGridColumn headerText="文件名" width="200" dataField="fileName" />  
  119.               <mx:DataGridColumn headerText="文件大小" width="100" dataField="fileSize" />  
  120.               <mx:DataGridColumn headerText="文件类型" width="100" dataField="fileType" />  
  121.               <mx:DataGridColumn headerText="上传进度"  >  
  122.                   <mx:itemRenderer>  
  123.                      <fx:Component>  
  124.                          <mx:HBox width="100%" height="100%" paddingLeft="10" >  
  125.                             <fx:Script>  
  126.                                 <![CDATA[  
  127.                                    importmx.collections.ArrayCollection; 
  128.                                    
  129.                                    protected functiondeleteFile_clickHandler(event:MouseEvent):void 
  130.                                    { 
  131.                                        // TODO Auto-generated method stub 
  132.                                        // 
  133.                                        var grid:Object =event.target.parent.parent.parent; 
  134.                                        var dp:ArrayCollection =ArrayCollection(grid.dataProvider); 
  135.                                        var index:int = dp.getItemIndex(data); 
  136.                                        outerDocument.arrayCollection.removeItemAt(index); 
  137.                                        dp.removeItemAt(index); 
  138.                                        grid.parent.refresh(); 
  139.                                    } 
  140.                                    
  141.                                    protected functionprogressBar_progressHandler(event:ProgressEvent):void 
  142.                                    { 
  143.                                        // TODO Auto-generated method stub 
  144.                                        deleteFile.visible=false; 
  145.                                    } 
  146.                                    
  147.                                    protected function progressBar_completeHandler(event:Event):void 
  148.                                    { 
  149.                                        // TODO Auto-generated method stub 
  150.                                        deleteFile.visible=true; 
  151.                                    } 
  152.                                    
  153.                                    
  154.                                    
  155.                                 ]]>  
  156.                             </fx:Script>  
  157.                             <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%" />  
  158.                             <mx:LinkButton id="deleteFile" width="10%" icon="@Embed('images/delete.png')"click="deleteFile_clickHandler(event)" />  
  159.                          </mx:HBox >  
  160.                      </fx:Component>  
  161.                   </mx:itemRenderer>  
  162.               </mx:DataGridColumn>  
  163.            </mx:columns>  
  164.        </mx:DataGrid>  
  165.        <mx:HBox paddingLeft="20" horizontalGap="35"paddingTop="8" x="218" y="295" width="100%" height="100%">  
  166.            <s:Button id="browseFile" height="31" label="浏览..." fontSize="18" click="selectFiles()"/>  
  167.            <s:Button id="uploadFile" height="31" label="上传" fontSize="18"click="uploadFile_clickHandler(event)"/>  
  168.            <s:Button id="cancleUpload" height="31" label="清空" fontSize="18"click="cancleUpload_clickHandler(event)"/>  
  169.        </mx:HBox>  
  170.     </s:Panel>  
  171. </s:Application>  

     运行时页面

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

  1. package com.ldfsoft.servlet;  
  2.    
  3. import java.io.File;  
  4. import java.io.IOException;  
  5. import java.io.PrintWriter;  
  6. import java.util.Iterator;  
  7. import java.util.List;  
  8.    
  9. import javax.servlet.ServletException;  
  10. import javax.servlet.http.HttpServlet;  
  11. importjavax.servlet.http.HttpServletRequest;  
  12. import javax.servlet.http.HttpServletResponse;  
  13.    
  14. importorg.apache.commons.fileupload.FileItem;  
  15. importorg.apache.commons.fileupload.FileUploadException;  
  16. importorg.apache.commons.fileupload.disk.DiskFileItemFactory;  
  17. importorg.apache.commons.fileupload.servlet.ServletFileUpload;  
  18.    
  19. public class FileUploadServlet extendsHttpServlet {  
  20.    
  21.  @SuppressWarnings("unchecked")  
  22. @Override  
  23. protected void service(HttpServletRequestrequest, HttpServletResponse response)  
  24.                    throwsServletException, IOException {  
  25.          //TODO Auto-generated method stub  
  26.           response.setContentType("text/html;charset=utf-8");  
  27.           DiskFileItemFactory diskFileItemFactory=newDiskFileItemFactory();  
  28.           ServletFileUpload servletFileUpload=newServletFileUpload(diskFileItemFactory);  
  29.           servletFileUpload.setHeaderEncoding("utf-8");  
  30.           servletFileUpload.setSizeMax(1024*1024*1024);  
  31.           try {  
  32.                    List<FileItem>items=servletFileUpload.parseRequest(request);  
  33.                    Iterator<FileItem>iterator=items.iterator();  
  34.                    while(iterator.hasNext()){  
  35.                             FileItemitem=(FileItem) iterator.next();  
  36.                             if(!item.isFormField()){  
  37.                                      StringfileName=item.getName();  
  38.                                      Stringpath=getServletContext().getRealPath("/")+"files/"; //文件上传目录为根目录下面的files文件夹里  
  39.                                      System.out.println(fileName);  
  40.                                      FileuploadFile=new File(path+fileName);  
  41.                                      item.write(uploadFile);  
  42.                                       
  43.                             }  
  44.                    }  
  45.          }catch (FileUploadException e) {  
  46.                    //TODO Auto-generated catch block  
  47.                    e.printStackTrace();  
  48.          }catch (Exception e) {  
  49.                    //TODO Auto-generated catch block  
  50.                    e.printStackTrace();  
  51.          }  
  52.          }  
  53.    
  54. }  

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

 开始选择文件：

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

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

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wwwroot/p/2721706.html