Java与Flex学习笔记（8）----Flex带进度条的多文件上传（基于Servlet）
来源：互联网 发布：java 数组切片 编辑：程序博客网 时间：2024/04/30 12:39
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,代码如下所示：
<?xmlversion="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")@Overrideprotected 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个按钮恢复正常并且会提示你是否继续上传，如下所示：
好了，演示完毕，这就是这两天的劳动的成果，觉得好就支持我一下吧，第一次做这个还是蛮幸苦的。下节决定做文件下载，尽情期待…
原创文章，转载请注明出处：http://www.dianfusoft.com/
- Java与Flex学习笔记（8）----Flex带进度条的多文件上传（基于Servlet）
- Flex带进度条的多文件上传（基于Servlet）
- Flex带进度条的多文件上传（基于Servlet）
- Flex +java 多文件上传带进度条
- Flex 带进度条的文件上传
- flex多文件上传带进度条
- Flex 带进度条上传文件代码
- Flex 多文件上传带进度条(演示，源码)
- Flex+Java Servlet实现文件上传（转）
- Flex + servlet 上传文件
- Java与Flex学习笔记（15）----Flex中的Application与Module间的通信
- Java与Flex学习笔记（7）----将Spring与Flex整合（基于嵌入式tomcat）(2012-07-24 更新)
- Flex+Java Servlet文件上传实例
- Flex+Java Servlet文件上传实例
- Flex+Java Servlet文件上传实例
- Java与Flex学习笔记（11）----关于Struts2拦截Flex请求的问题
- Java与Flex学习笔记（13）----Flex中解析地址栏传递的参数
- Java与Flex学习笔记（14）----Flex中实现倒计时的效果
- 良好的编程习惯（现在开始去注意）
- Yong式矩阵的查找
- drupal7一： 安装配置CKEditor 和 IMCE 模块
- 11csdn-java周末作业（登陆界面）
- new 与 malloc , realloc
- Java与Flex学习笔记（8）----Flex带进度条的多文件上传（基于Servlet）
- 多线程程序中线程安全的操纵可视化控件
- mysql中的编码各个变量的含义
- 数据结构复习（层次遍历）
- 显示器面板类型
- C#中仿QQ截图
- 介绍HashSet .
- 八皇后问题
- TCP/IP学习（一）基本概念
