flex上传多个文件

我这里的需求是上传前可以删除不需要的，开始上传后不可以更改。

运行后的样子：

uploadgrid.mxm 上传jar的类，

Html代码

1. <?xml version="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. creationComplete="group_creationCompleteHandler(event)"
5. xmlns:mx="library://ns.adobe.com/flex/mx"
6. width="500" height="250">
7. <s:layout>
8. <s:BasicLayout/>
9. </s:layout>
10. <fx:Declarations>
11. <mx:NumberFormatter id="filesizeFormatter" useThousandsSeparator="true"/>
12. </fx:Declarations>
13. <fx:Script>
14. <![CDATA[
15. import mx.collections.ArrayCollection;
16. import mx.controls.Alert;
17. import mx.events.CloseEvent;
18. import mx.events.CollectionEvent;
19. import mx.events.FlexEvent;
20. import mx.formatters.CurrencyFormatter;
21. import mx.formatters.NumberFormatter;
24. [Bindable]
25. public var deleteenabled:Boolean=true;
27. //文件列表
28. [Bindable]
29. private var fileRefs: FileReferenceList = new FileReferenceList();
31. //这个地址是我测试用的服务器地址
32. [Bindable]
33. private var urlrequest: URLRequest = new URLRequest("http://localhost:8080/auto/FileUploaded");
35. //文件列表中的文件
36. [Bindable]
37. public var selectedFiles: ArrayCollection = new ArrayCollection([]);
39. //上传的文件
40. private var singleThreadFiles: Array = [];
42. //逐个上传文件
43. private function singleThreadUploadFile(): void
44. {
45. //FIFO：逐个从列表中取出，进行上传
46. if (singleThreadFiles.length > 0)
47. {
48. var mf: MyFile = singleThreadFiles.pop() as MyFile ;
49. var f:FileReference=mf.fr;
50. f.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, doSingleUploadFileComplete);
51. f.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
52. f.upload(urlrequest);
53. }
54. else
55. {
56. uploadbutton.enabled=false;
57. uploadtext.text="全部上传成功！";
58. showuploadjar();
60. }
61. }
63. private function doSingleUploadFileComplete(event: Event): void
64. {
65. var uploadInfo:String=event.data;
66. var uploadInfoArray:Array = uploadInfo.split("#");
67. if(uploadInfoArray[0]=="true")
68. {
69. var f: FileReference = event.target as FileReference;
70. f.removeEventListener(Event.COMPLETE, doSingleUploadFileComplete);
71. singleThreadUploadFile();
72. }else
73. {
74. Alert.show(uploadInfoArray[1]+"请检查网络或程序是否正常，目录是否正确并创建，请删除上传不成功的jar，重新选择后上传！");
75. selectFileButton.enabled=true;
76. cleanAll.enabled=true;
77. deleteenabled=true;
78. }
79. }
81. //初始化
82. private function init(): void
83. {
84. Security.allowDomain("*");
85. fileRefs.addEventListener(Event.SELECT, fileSelectHandler);
86. fileRefs.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
87. addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
88. }
90. //要上传的文件类型，我这里是jar文件
91. private function selectFile(): void
92. {
94. var jarfile:FileFilter = new FileFilter("jar文件(*.jar)", "*.jar*");
95. var allfile:FileFilter = new FileFilter("所有文件(*.*)", "*.*");
96. var allTypes:Array = new Array();
97. allTypes.push(jarfile);
98. allTypes.push(allfile);
99. fileRefs.browse(allTypes);
101. }
103. //用户选择的文件，如果需要判断是否可以多次选择同名的文件可以在这里判断
104. private function fileSelectHandler(event: Event): void
105. {
106. for each (var f: FileReference in fileRefs.fileList)
107. {
108. var mf:MyFile = new MyFile(f);
109. selectedFiles.addItem(mf);
110. }
111. }
113. //出错后的处理
114. private function ioErrorHandler(e:IOErrorEvent): void
115. {
116. Alert.show(e.text);
117. Alert.show("请检查网络或程序是否正常，请删除上传不成功的jar，重新选择后上传！");
118. selectFileButton.enabled=true;
119. cleanAll.enabled=true;
120. deleteenabled=true;
121. }
123. //删除列表中的文件
124. public function removeFile(mf: MyFile): void
125. {
126. var index: int = selectedFiles.getItemIndex(mf);
127. if (index != -1)
128. selectedFiles.removeItemAt(index);
129. }
131. //初始化组件或应用程序
132. protected function group_creationCompleteHandler(event:FlexEvent):void
133. {
134. init();
135. }
137. //确认上传的文件
138. protected function button1_clickHandler(event:MouseEvent):void
139. {
140. Alert.show("开始上传后不能更改选择的jar包 ，确定上传?",
141. "确认上传",
142. Alert.YES|Alert.NO,
143. null,
144. startUpload);
145. }
147. //根据业务的需求上传后不能更改，可以根据自己的业务逻辑去改相应的处理
148. private function startUpload(e: CloseEvent): void{
150. if (e.detail == Alert.YES){
151. selectFileButton.enabled=false;
152. cleanAll.enabled=false;
153. deleteenabled=false;
154. singleThreadFiles = selectedFiles.toArray().concat();
156. for(var i:int=0;i<singleThreadFiles.length;i++)
157. {
158. if(singleThreadFiles[i] is MyFile)
159. {
160. var mf:MyFile= singleThreadFiles[i] as MyFile;
161. var f:FileReference=mf.fr;
162. trace(f.name);
163. }
164. }
165. singleThreadFiles.reverse();
166. singleThreadUploadFile();
167. }
168. }
170. //输出上传后的jar的信息，如果需要更多的信息可以在MyFlie类里找到
171. private function showuploadjar():void
172. {
173. for(var i:int=0; i<selectedFiles.length;i++)
174. {
175. var mf:MyFile=selectedFiles.getItemAt(i) as MyFile;
176. // Alert.show(mf.uploadFilePath+mf.uploadFileName);
177. trace("上传后的路径："+mf.uploadFilePath+mf.uploadFileName);
178. mf.removeDateEvent();
179. }
180. }
182. ]]>
183. </fx:Script>
184. <s:VGroup paddingTop="10">
185. <mx:VBox>
186. <mx:HBox width="100%">
187. <mx:Button id="selectFileButton" label="浏览" click="selectFile()"/>
188. <mx:Box width="100%" horizontalAlign="right">
189. <mx:Button id="cleanAll" click="selectedFiles.removeAll();" label="清空"/>
190. </mx:Box>
191. </mx:HBox>
192. <mx:DataGrid id="files" dataProvider="{selectedFiles}" >
193. <mx:columns>
194. <mx:DataGridColumn width="200" headerText="文件名" dataField="fr.name" />
195. <mx:DataGridColumn width="100" headerText="大小(字节)" dataField="fr.size">
196. <mx:itemRenderer>
197. <fx:Component>
198. <mx:Label text="{outerDocument.filesizeFormatter.format(data.size)}" textAlign="right"/>
199. </fx:Component>
200. </mx:itemRenderer>
201. </mx:DataGridColumn>
202. <mx:DataGridColumn width="100" headerText="状态" dataField="uploadlable" />
203. <mx:DataGridColumn headerText="删除" width="80">
204. <mx:itemRenderer>
205. <fx:Component>
206. <mx:HBox fontSize="10" fontWeight="normal" fontThickness="1">
207. <fx:Script>
208. <![CDATA[
209. protected function linkbutton1_clickHandler(event:MouseEvent):void
210. {
211. var mf:MyFile = data as MyFile;
212. outerDocument.removeFile(mf);
213. }
215. ]]>
216. </fx:Script>
217. <mx:LinkButton label="Delete" click="linkbutton1_clickHandler(event)" enabled="{outerDocument.deleteenabled}">
218. </mx:LinkButton>
219. </mx:HBox>
220. </fx:Component>
221. </mx:itemRenderer>
222. </mx:DataGridColumn>
224. </mx:columns>
225. </mx:DataGrid>
226. <mx:HBox>
227. <mx:Button label="上传" id="uploadbutton" click="button1_clickHandler(event)" />
228. <s:Label paddingTop="7" id="uploadtext" text="" />
229. </mx:HBox>
230. </mx:VBox>
231. </s:VGroup>
232. </s:Application>

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 creationComplete="group_creationCompleteHandler(event)"
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 width="500" height="250">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<mx:NumberFormatter id="filesizeFormatter" useThousandsSeparator="true"/>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.CloseEvent;
			import mx.events.CollectionEvent;
			import mx.events.FlexEvent;
			import mx.formatters.CurrencyFormatter;
			import mx.formatters.NumberFormatter;
			
			
			[Bindable]
			public var deleteenabled:Boolean=true;
			
			//文件列表
			[Bindable]
			private var fileRefs: FileReferenceList = new FileReferenceList();
			
			//这个地址是我测试用的服务器地址
			[Bindable]
			private var urlrequest: URLRequest = new URLRequest("http://localhost:8080/auto/FileUploaded");
			
			//文件列表中的文件
			[Bindable]
			public var selectedFiles: ArrayCollection = new ArrayCollection([]);
			
			//上传的文件
			private var singleThreadFiles: Array = [];
			
			//逐个上传文件
			private function singleThreadUploadFile(): void
			{
				//FIFO：逐个从列表中取出，进行上传
				if (singleThreadFiles.length > 0)
				{
					var mf: MyFile = singleThreadFiles.pop() as MyFile ;
					var f:FileReference=mf.fr;
					f.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, doSingleUploadFileComplete);
					f.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
					f.upload(urlrequest);
				}
				else
				{
					uploadbutton.enabled=false;
					uploadtext.text="全部上传成功！";
					showuploadjar();
					
				}
			}
			
			private function doSingleUploadFileComplete(event: Event): void
			{
				var uploadInfo:String=event.data;
				var uploadInfoArray:Array = uploadInfo.split("#");	
				if(uploadInfoArray[0]=="true")
				{
					var f: FileReference = event.target as FileReference;
					f.removeEventListener(Event.COMPLETE, doSingleUploadFileComplete);
					singleThreadUploadFile();
				}else
				{
					Alert.show(uploadInfoArray[1]+"请检查网络或程序是否正常，目录是否正确并创建，请删除上传不成功的jar，重新选择后上传！");
					selectFileButton.enabled=true;
					cleanAll.enabled=true;
					deleteenabled=true;
				}
			}
			
			//初始化
			private function init(): void
			{
				Security.allowDomain("*");
				fileRefs.addEventListener(Event.SELECT, fileSelectHandler);
				fileRefs.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
				addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);   
			}
			
			//要上传的文件类型，我这里是jar文件
			private function selectFile(): void
			{
				
				var jarfile:FileFilter = new FileFilter("jar文件(*.jar)", "*.jar*"); 
				var allfile:FileFilter = new FileFilter("所有文件(*.*)", "*.*"); 
				var allTypes:Array = new Array(); 
				allTypes.push(jarfile);
				allTypes.push(allfile);
				fileRefs.browse(allTypes); 
				
			}
			
			//用户选择的文件，如果需要判断是否可以多次选择同名的文件可以在这里判断
			private function fileSelectHandler(event: Event): void
			{
				for each (var f: FileReference in fileRefs.fileList)
				{
					var mf:MyFile = new MyFile(f);
					selectedFiles.addItem(mf);
				}
			}
			
			//出错后的处理
			private function ioErrorHandler(e:IOErrorEvent): void
			{
				Alert.show(e.text);
				Alert.show("请检查网络或程序是否正常，请删除上传不成功的jar，重新选择后上传！");
				selectFileButton.enabled=true;
				cleanAll.enabled=true;
				deleteenabled=true;
			}
			
			//删除列表中的文件
			public function removeFile(mf: MyFile): void
			{
				var index: int = selectedFiles.getItemIndex(mf);
				if (index != -1)
					selectedFiles.removeItemAt(index);
			}
			
			//初始化组件或应用程序
			protected function group_creationCompleteHandler(event:FlexEvent):void
			{
				init();
			}
			
			//确认上传的文件
			protected function button1_clickHandler(event:MouseEvent):void
			{
				Alert.show("开始上传后不能更改选择的jar包 ，确定上传?", 
					"确认上传", 
					Alert.YES|Alert.NO, 
					null, 
					startUpload); 
			}
			
			//根据业务的需求上传后不能更改，可以根据自己的业务逻辑去改相应的处理
			private function startUpload(e: CloseEvent): void{ 
				
				if (e.detail == Alert.YES){ 
					selectFileButton.enabled=false;
					cleanAll.enabled=false;
					deleteenabled=false;
					singleThreadFiles = selectedFiles.toArray().concat();
					
					for(var i:int=0;i<singleThreadFiles.length;i++)
					{
						if(singleThreadFiles[i] is MyFile)
						{
							var mf:MyFile= singleThreadFiles[i] as MyFile;
							var f:FileReference=mf.fr;
							trace(f.name);
						}
					}
					singleThreadFiles.reverse();
					singleThreadUploadFile();
				}
			}
			
			//输出上传后的jar的信息，如果需要更多的信息可以在MyFlie类里找到
			private function showuploadjar():void
			{
				for(var i:int=0; i<selectedFiles.length;i++)
				{
					var mf:MyFile=selectedFiles.getItemAt(i) as MyFile;
//					Alert.show(mf.uploadFilePath+mf.uploadFileName);
					trace("上传后的路径："+mf.uploadFilePath+mf.uploadFileName);
					mf.removeDateEvent();
				}
			}
			
		]]>
	</fx:Script>
	<s:VGroup paddingTop="10">
		<mx:VBox>
			<mx:HBox width="100%">
				<mx:Button id="selectFileButton" label="浏览" click="selectFile()"/>
				<mx:Box width="100%" horizontalAlign="right">
					<mx:Button  id="cleanAll" click="selectedFiles.removeAll();" label="清空"/>
				</mx:Box>
			</mx:HBox>
			<mx:DataGrid id="files" dataProvider="{selectedFiles}" >
				<mx:columns>
					<mx:DataGridColumn width="200" headerText="文件名" dataField="fr.name" />
					<mx:DataGridColumn width="100" headerText="大小(字节)" dataField="fr.size">
						<mx:itemRenderer>
							<fx:Component>
								<mx:Label text="{outerDocument.filesizeFormatter.format(data.size)}" textAlign="right"/>
							</fx:Component>
						</mx:itemRenderer>
					</mx:DataGridColumn>					
					<mx:DataGridColumn width="100" headerText="状态" dataField="uploadlable" />
					<mx:DataGridColumn headerText="删除" width="80">
						<mx:itemRenderer>
							<fx:Component>
								<mx:HBox fontSize="10" fontWeight="normal" fontThickness="1">
									<fx:Script>
										<![CDATA[
											protected function linkbutton1_clickHandler(event:MouseEvent):void
											{
												var mf:MyFile = data as MyFile;
												outerDocument.removeFile(mf);
											}
											
										]]>
									</fx:Script>
									<mx:LinkButton label="Delete"  click="linkbutton1_clickHandler(event)" enabled="{outerDocument.deleteenabled}">
									</mx:LinkButton>
								</mx:HBox>
							</fx:Component>
						</mx:itemRenderer>
					</mx:DataGridColumn>
					
				</mx:columns>
			</mx:DataGrid>
			<mx:HBox>
				<mx:Button label="上传" id="uploadbutton" click="button1_clickHandler(event)" />
				<s:Label paddingTop="7" id="uploadtext" text="" />
			</mx:HBox>
		</mx:VBox>
	</s:VGroup>
</s:Application>