●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个按钮恢复正常并且会提示你是否继续上传,如下所示:
好了,演示完毕,这就是这两天的劳动的成果,觉得好就支持我一下吧,第一次做这个还是蛮幸苦的。下节决定做文件下载,尽情期待…