加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-15 04:46:08 所属栏目：百科 来源：网络整理
导读：?Flex中实现的文件上传主要用到以下两个类： ---点击阅读更多 ??? ??????●FileReference：FileReference 类提供了在用户计算机和服务器之间上载和下载文件的方法。操作系统对话框会提示用户选择要上载的文件或用于下载的位置。每个 FileReference 对象都引
?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,代码如下所示：


[html] view plain copy print ?
  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("文件已经上传完毕，是否接着上传？",chooseUploadFile,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，代码如下所示：


[java] view plain copy print ?
  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个按钮恢复正常并且会提示你是否继续上传，如下所示：




? ? ? ?好了，演示完毕，这就是这两天的劳动的成果，觉得好就支持我一下吧，第一次做这个还是蛮幸苦的。下节决定做文件下载，尽情期待…


--->点击阅读更多 ???

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同