夜半难眠 » 上传组件 http://www.havenliu.com 记录点生活的无奈 Thu, 29 Dec 2011 03:25:16 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 自己写的一个Flex3多文件上传组件 http://www.havenliu.com/web/327.html http://www.havenliu.com/web/327.html#comments Wed, 31 Mar 2010 07:43:20 +0000 Haven http://www.havenliu.com/?p=327 最近在看《Flex3权威指南》，除了书中个别地方翻译的笔误外，确实是本好书，看的兴起，就写了这个多文件上传组件。

网上现成上传组件很多，有些写的很好，我的当然不能和别人那些牛人的相比，仅做学习交流之用，在代码组织和结构设计方面还有很多需要改进的地方，希望大家多提意见。

废话不多说，先看工作界面吧：initwork2work1

我的开发环境是Eclipse+Flex插件+Myeclipse（Myeclipse可有可无，这是我用来开发J2EE的），用MyEclipse7.5集成包的同志们安装Flex插件有困难的可以参考我前面的一篇文章：MyEclipse 7.5,MyEclipse 8.0中安装Flex插件。整个源文件的结构如下：

tree

其实只要看flex_src和src两个目录就可以了。下面主要介绍下程序代码（至于怎样新建Flex Project，怎样下一步之类的就不再罗嗦了，实在不知道的自己Google去）：flex_src 目录下是所有的Flex源代码，src下面的是后台的接收代码（java 的servlet）。com.havenliu.event.DeleteEvent.as是一个自定义的Flex事件类，用来删除单个附件。cpt目录下的deletebtn.mxml是一个自定义删除组件，很简单，里面就一个删除按钮，但附件完成上传后，改按钮变成灰色；最主要的东西都在MyUpload.mxml文件中。

?Download MyUpload.mxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="13" creationComplete="init()" xmlns:e="cpt.*" >
<mx:Script>
	<![CDATA[
		import com.havenliu.event.DeleteEvent;
		import cpt.deletebtn;
		import mx.events.CloseEvent;
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import flash.profiler.showRedrawRegions;
        import mx.controls.ProgressBar;
 
        //最大上传文件数
		private var maxFiles:int=5;
		//最大上传文件大小(M)
		private var maxSize:Number=50;
		public var fileList:FileReferenceList = new FileReferenceList();
 
		private var fileSize:Number=0;
		//后台接受附件的地址，这里是一个servlet，你可以自己定义为jsp、php、asp、action等
		private var uploadurl:URLRequest = new URLRequest("http://localhost:8080/MyUpload/UploadFile");
		[Bindable]
		private var files:ArrayCollection=new ArrayCollection();
 
		private function init():void{
			//附件选择监听器
			fileList.addEventListener(Event.SELECT,selectHandler);
			//给“添加”按钮注册监听器
			browse.addEventListener(MouseEvent.CLICK,browseHandler);
			//删除附件按钮注册监听器
			deleteAll.addEventListener(MouseEvent.CLICK,resetHandler);
			buttonState();
		}
 
		private function selectHandler(event:Event):void
		{
			var countfiles:int=files.length+fileList.fileList.length;
			var countsize:Number=0;
			//计算总附件大小
			for each(var _file:FileReference in fileList.fileList)
			{
				countsize+=_file.size;
			}
			countsize+=fileSize;
			if(countfiles>maxFiles)
			{
				Alert.show("一次最大只能上传"+maxFiles+"个附件");
			}else if(countsize>maxSize*(1024*1024))
			{
				Alert.show("附件大小不能超过"+maxSize+"M");
			}else
			{
				for each(var file:FileReference in fileList.fileList)
				{
					if(!checkDitto(file))
					{
						files.addItem(file);
						refreshText();
						buttonState();
					}
				}
			}
		}
 
		private function browseHandler(event:Event):void
		{
			//这里没有过滤文件类型，即所有文件都可以上传，实际开发中，为了安全考虑可能需要过滤
			var fileType:FileFilter=new FileFilter("文件类型(*.*)","*.*");
			var allTypes:Array = new Array(fileType);				
			fileList.browse(allTypes);
		}
		private function resetHandler(event:Event):void
		{
			Alert.show("您确定要删除全部附件？","提示信息",Alert.YES|Alert.NO,fileGrid,alertHandler,null,Alert.NO);
			function alertHandler(event:CloseEvent):void
			{
				if(event.detail==Alert.YES)
				{
					files.removeAll();
					refreshText();
					buttonState();
				}
			}
		}
		//更新Text文本信息
		private function refreshText():void
		{
			//重新统计附件大小，将原来的信息清0
			fileSize=0;
			for(var i:int=0;i<files.length;i++)
			{
				fileSize+=FileReference(files[i]).size;
			}
			msg.text="共计"+files.length+"个附件，文件总大小："+(fileSize/(1024*1024)).toString().slice(0,4)+"M (最大上传5个附件，总大小不超过50M)";
		}
		//控制按钮状态
		private function buttonState():void
		{
			if(files.length<1)
			{
				upload.enabled=false;
				deleteAll.enabled=false;
			}else
			{
				upload.enabled=true;
				deleteAll.enabled=true;
			}
			if(files.length>=maxFiles)
			{
				browse.enabled=false;
			}else
			{
				browse.enabled=true;
			}
		}
		private function uploadfile():void
		{
			if(files.length>0)
			{
				for(var i:int=0;i<files.length;i++)
				{
					var file:FileReference=files[i] as FileReference;
					try{
						file.addEventListener(Event.COMPLETE,uploadok);
//						 file.addEventListener(ProgressEvent.PROGRESS,uploadstart);
						file.upload(uploadurl);
					}catch(error:Error)
					{
						Alert.show("上传失败",error.message);
					}
				}
				//文件全部上传完成后，上传和全部删除按钮变为灰色
				upload.enabled=false;
				deleteAll.enabled=false;
				browse.enabled=false;
			}
		}
 
		//判断文件是否重复
		private function checkDitto(file:FileReference):Boolean
		{
			var result:Boolean=false;
			for (var i:int=0;i<files.length;i++)
			{
				var _file:FileReference=files[i];
				//如果选择文件的名字、大小和最后修改时间完全一样，则这两个文件重复
				if(file.name==_file.name||file.modificationDate==_file.modificationDate||file.size==_file.size)
				{
					result= true;
					break;
				}
				else
				{
					result= false;
				}
			}
			return result;
		}
		public  function deleteFile(data:Object):void
		{
			var indexNo:int=files.getItemIndex(data as FileReference);
			files.removeItemAt(indexNo);
			refreshText();
			buttonState();
		}
 
		public  function probar(event:Event,data:Object):void
		{
			var probar:ProgressBar=event.target as ProgressBar;
			probar.label = "%3%%";
            probar.setProgress(0, 100);
            var file:FileReference=data as FileReference;
            file.addEventListener(ProgressEvent.PROGRESS,
            	function(event: ProgressEvent): void
	                 {
	                     probar.setProgress(event.bytesLoaded, event.bytesTotal);
	                });
 
		}
		private function uploadok(event:Event):void
		{
			var file: FileReference = event.target as FileReference;
			file.removeEventListener(Event.COMPLETE,uploadok);
			trace("上载完成");
 
		}
//		private function uploadstart(event:Event):void
//		{
//			trace("上载开始");
//		}
		public function deletefile(event:DeleteEvent):void
		{
			var delfile:FileReference=event.file;
			deleteFile(delfile);
		}
 
	]]>
</mx:Script>
	<mx:Panel width="500" height="300" layout="absolute" title="多文件上传组件">
			<mx:VBox width="100%" height="100%" x="0" y="0">
					<mx:DataGrid id="fileGrid" width="100%" dataProvider="{files}">
						<mx:columns>
							<mx:DataGridColumn headerText="文件名" dataField="name" />
							<mx:DataGridColumn width="80" headerText="大小(字节)" dataField="size"/>
							<mx:DataGridColumn width="120" headerText="上传进度" dataField="loadRate" sortable="false" ><mx:itemRenderer>
								<mx:Component>
								<mx:HBox fontSize="10" fontWeight="normal" fontThickness="1">
								<mx:ProgressBar verticalCenter="true" width="100%" paddingLeft="5" paddingRight="5"
                                    maximum="100" minimum="0" labelPlacement="center" mode="manual"
                                   label="%3%%" textAlign="left" creationComplete="outerDocument.probar(event,data)"/>
                                   </mx:HBox>
								</mx:Component>
								</mx:itemRenderer>
							</mx:DataGridColumn>
							<mx:DataGridColumn    headerText="删除" sortable="false" >
							<mx:itemRenderer> 
								<mx:Component> 
								<e:deletebtn  tarfile="{data as FileReference}" delFile="outerDocument.deletefile(event)">
								</e:deletebtn>
								</mx:Component> 
								</mx:itemRenderer>
							</mx:DataGridColumn>
						</mx:columns>
					</mx:DataGrid>
					<mx:HBox width="100%" height="39">
							<mx:Spacer/>
							<mx:Button  id="browse" label="添加..." textAlign="right"/>
							<mx:Button id="upload" label="上传" click="uploadfile()" textAlign="right"/>
							<mx:Button id="deleteAll" label="全部删除" textAlign="right"/>
					</mx:HBox>
					<mx:Text id="msg" text="共计0个附件，文件总大小：0M (最大上传5个附件，总大小不超过50M)" fontSize="12" fontFamily="Arial"/>
			</mx:VBox>
	</mx:Panel>
 
</mx:Application>

DeleteEvent.as的源代码：

?Download DeleteEvent.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package com.havenliu.event
{
	import flash.events.Event;
	import flash.net.FileReference;
 
	public class DeleteEvent extends Event
	{
		//当前要删除的附件
		public var file:FileReference;
 
		public function DeleteEvent(type:String,file:FileReference)
		{
			super(type);
			this.file=file;
		}
	}
}

deletebtn.mxml组件的源代码：

?Download deletebtn.mxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="btnlis()">
 <mx:Metadata>
        [Event(name="delFile", type="com.havenliu.event.DeleteEvent")]
 </mx:Metadata>
 
<mx:Script>
	<![CDATA[
	import com.havenliu.event.DeleteEvent;
		public var tarfile:FileReference;
 
		internal function deleteFile():void
		{
			var delevent:DeleteEvent=new DeleteEvent("delFile",tarfile);
			this.dispatchEvent(delevent);
		} 
		private function comlis(event:Event):void
		{
			deletebutton.enabled=false;
		}
		private function btnlis():void
		{
			//给当前附件注册监听器，如果附件已经上传完成，则将删除按钮的enabled设置为false(不可操作)
			tarfile.addEventListener(Event.COMPLETE,comlis);
		}
 
	]]>
</mx:Script>
	<mx:Button id="deletebutton" label="删除" click="deleteFile()" >
	</mx:Button>
</mx:Canvas>

后台接收文件的源代码。这里用的是java做的后台。用Servlet接收的。你可以用php或者asp做后台都无所谓，选择自己熟悉的就行：

?Download UploadFile.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

 
package com.havenliu.servlet;
 
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
 
public class UploadFile extends HttpServlet {
 
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
		doPost(request,response);
	}
 
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
		String tempDir="C:\\temp\\";//文件存储路径
		String saveDir="C:\\temp\\save\\";//临时文件存储路径
		if (!new File(saveDir).isDirectory())
		{
			new File(saveDir).mkdirs();
		}
 
		if (!new File(tempDir).isDirectory())
		{
			new File(tempDir).mkdirs();
		}
		DiskFileItemFactory dfif = new DiskFileItemFactory();
		dfif.setSizeThreshold(4096);
		dfif.setRepository(new File(tempDir));
 
		ServletFileUpload sfu = new ServletFileUpload(dfif);
		sfu.setHeaderEncoding("utf-8");
 
		// 设置最大上传尺寸
		sfu.setSizeMax(50 * 1024 * 1024);
		// 从request得到 所有 上传域的列表
		List<Object> fileList = null;
		try {
			fileList = sfu.parseRequest(request);
		} catch (FileUploadException e) {// 处理文件尺寸过大异常
			e.printStackTrace();
		}
		if (fileList == null || fileList.size() == 0) {
 
		}
		// 得到所有上传的文件
		Iterator<Object> fileItr = fileList.iterator();
		while(fileItr.hasNext())
		{
			 FileItem item = (FileItem) fileItr.next();
             if (!item.isFormField()) {
                 String name = item.getName();
                 try {
                     item.write(new File(saveDir + name));
                 }catch (Exception e) {
                     e.printStackTrace();
                 }
             }
		}
	}
 
}

最后别忘了在web.xml中注册你的servlet。
到这里基本就差不多了，代码中的注释基本能看懂了。人品不是很差的话应该能直接跑起来了。源代码包就不放上来了，主要是没地方上传，那些网盘什么的我不太喜欢用。需要的朋友们留下邮箱我发给你们。

PS：最后叽歪两句：现在找个满意的图床真难啊，国内的基本不敢用，很多不稳定，开始还好，最后那天就悄然无声的关服务器了，让你哭都哭不出来。稳定的很多又不支持外链，类似163之类的；那些支持的外链、也勉强能算的上稳定的又有很多莫名奇妙的规矩，限制大小和流量啊（这还好，还勉强能接受），自做主张的给你的图片加水印（最不能接收这点）什么。国外的好的图床到是蛮多，比如google的picasa 、雅虎的flickr什么的，这些都用过，但最后都在伟大的GFW下壮烈牺牲了，就算有些坚持到现在还能用，但谁也不敢保证明天早上我打开的我的blog不看见红叉叉。犹豫再三。国外的也不敢用了。。。。。。在折腾了两天后，终于决定把文章里的图片就放在我自己的空间里，从长远来考虑这不太好，但这也是目前最好的选择了。。。。。。。

相关文章

]]> http://www.havenliu.com/web/327.html/feed 3