AS3.0写通用FLASH带进度条的上传插件
在项目中经常要用文件上传的功能，但是换个语言就要重新换个写法，所以写了个FLASH上传，好看又好用。
FLEX4.5编写的客户端源码：
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 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="600" minHeight="400"
5 creationComplete="application1_creationCompleteHandler(event)">
6 <fx:Style source="JFileUploader.css"/>
7
8 <fx:Script>
9 <![CDATA[
10 import flash.external.*;
11
12 import mx.collections.ArrayCollection;
13 import mx.controls.Alert;
14 import mx.controls.CheckBox;
15 import mx.controls.ProgressBar;
16 import mx.controls.dataGridClasses.DataGridColumn;
17 import mx.controls.dataGridClasses.DataGridItemRenderer;
18 import mx.events.FlexEvent;
19 [Bindable]
20 public var allIsChecked:Boolean=false;
21 [Bindable]
22 public var fileListArray:Array=new Array();
23 public var fileList:FileReferenceList=new FileReferenceList();
24 [Bindable]
25 public var fileUploadBathArray:Array=new Array();
26 [Bindable]
27 public var initObject:Object;
28 public var uploadURL:URLRequest;
29 public var fileFilters:Array=new Array();
30 public function init():void {
31 initObject = ExternalInterface.call("initJFlieUploader","go");
32 note.text=initObject.note;
33 note.x=selectFile_btn.width+selectFile_btn.x+2;
34 uploadURL=new URLRequest(initObject.uploadURL)
35 if(initObject.fileTypeAollow!=null)
36 {
37 var typeArr:Array=initObject.fileTypeAollow.split("},{")
38 for(var i:int=0;i<typeArr.length;i++)
39 {
40 var filters:Array=typeArr[i].toString().replace("{","").replace("}","").split("|");
41 fileFilters.push(new FileFilter(filters[0],filters[1]))
42 }
43
44 }
45 fileList.addEventListener(Event.SELECT,function(e:Event){
46 addFile(fileList,initObject.fileSizeMax);
47 })
48 }
49
50
51 protected function application1_creationCompleteHandler(event:FlexEvent):void
52 {
53 init();
54 fileListDG.height-=(selectFile_btn.height+selectFile_btn.y+fileListDG.y);
55 fileListDG.y+=selectFile_btn.height+selectFile_btn.y;
56 }
57
58 public function chxBox_header_clickHandler(e:Event):void
59 {
60 allIsChecked=e.target.selected;
61 }
62
63
64 protected function selectFile_btn_clickHandler(event:MouseEvent):void
65 {
66 fileList.browse(fileFilters)
67 }
68
69 public function addFile(fileList:FileReferenceList,fileSizeMax:uint):void
70 {
71 for(var i:int=0;i<fileList.fileList.length;i++)
72 {
73 var file:FileReference=fileList.fileList[i];
74 if(file.size>fileSizeMax)
75 {
76 Alert.show(file.name+"太大了","提示")
77 }
78 else
79 {
80 if(!isExist(file,fileListArray))
81 {
82 fileListArray.push(file)
83 }
84 }
85
86 }
87
88 fileListDG.dataProvider=fileListArray;
89 }
90
91 public function isExist(file:FileReference,fileArray:Array)
92 {
93
94 var exist:Boolean=false;
95 for each(var f:FileReference in fileArray)
96 {
97 if(f==file)
98 {
99 exist=true;
100 break;
101 }
102 }
103
104 return exist;
105 }
106
107
108 protected function cancel_btn_clickHandler(event:MouseEvent):void
109 {
110 for each (var f: FileReference in fileUploadBathArray)
111 {
112 f.cancel();
113 }
114 }
115
116 protected function remove_btn_clickHandler(event:MouseEvent):void
117 {
118 var temp:Array=new Array();
119
120 for each (var file: FileReference in fileListArray)
121 {
122 if(!isExist(file,fileUploadBathArray))
123 {
124 temp.push(file)
125 }
126 }
127
128 fileListArray=temp;
129 fileListDG.dataProvider=fileListArray;
130 }
131
132 protected function upload_btn_clickHandler(event:MouseEvent):void
133 {
134 singleThreadUploadFile();
135 }
136 private function singleThreadUploadFile(): void
137 {
138 if (fileUploadBathArray.length > 0)
139 {
140 var f: FileReference = fileUploadBathArray.shift() as FileReference;
141 f.addEventListener(Event.COMPLETE, doSingleUploadFileComplete);
142 f.upload(uploadURL);
143 }
144 }
145
146 private function doSingleUploadFileComplete(event: Event): void
147 {
148 var f: FileReference = event.target as FileReference;
149 f.removeEventListener(Event.COMPLETE, doSingleUploadFileComplete);
150 singleThreadUploadFile();
151 }
152 public function sizeFormat(item:Object,column:DataGridColumn):String
153 {
154
155 var value:Object = item[column.dataField];
156
157 return ((value as Number)/1024/1024).toFixed(1)+"M";
158
159 }
160
161 ]]>
162 </fx:Script>
163
164 <fx:Declarations>
165 <!-- 将非可视元素（例如服务、值对象）放在此处 -->
166 </fx:Declarations>
167 <s:Panel x="0" y="0" width="100%" height="100%" title="JFileUploader" id="mainPanel">
168 <s:Button x="3" y="3" label="选择文件" id="selectFile_btn" click="selectFile_btn_clickHandler(event)"/>
169 <s:Label x="3" y="6" id="note"/>
170 <mx:DataGrid id="fileListDG" width="99%" height="100%" y="3" horizontalCenter="0">
171
172 <mx:columns>
173 <mx:DataGridColumn width="18" sortable="false">
174 <mx:headerRenderer>
175 <fx:Component>
176 <mx:HBox>
177 <mx:CheckBox id="chxBox_header" paddingLeft="2" click="outerDocument.chxBox_header_clickHandler(event)"/>
178 </mx:HBox>
179 </fx:Component>
180 </mx:headerRenderer>
181 <mx:itemRenderer>
182 <fx:Component>
183 <mx:HBox>
184
185 <fx:Script>
186 <![CDATA[
187 import mx.controls.Alert;
188 import mx.core.INavigatorContent;
189 import mx.events.FlexEvent;
190 protected function chxBox_item_updateCompleteHandler(event:FlexEvent):void
191 {
192 var currFile:FileReference=data as FileReference;
193 if((event.target as CheckBox).selected)
194 {
195 if(!outerDocument.isExist(currFile,outerDocument.fileUploadBathArray))
196 {
197 outerDocument.fileUploadBathArray.push(currFile)
198 }
199 }
200 else
201 {
202 if(outerDocument.isExist(currFile,outerDocument.fileUploadBathArray))
203 {
204 for(var i:int=0;i<outerDocument.fileUploadBathArray.length;i++)
205 {
206 if(currFile==outerDocument.fileUploadBathArray[i] as FileReference)
207 {
208 outerDocument.fileUploadBathArray[i]=null;
209 }
210 }
211 }
212 }
213 }
214
215 ]]>
216 </fx:Script>
217
218 <mx:CheckBox id="chxBox_item" paddingLeft="2" updateComplete="chxBox_item_updateCompleteHandler(event)" selected="{outerDocument.allIsChecked}"/>
219 </mx:HBox>
220 </fx:Component>
221 </mx:itemRenderer>
222 </mx:DataGridColumn>
223 <mx:DataGridColumn dataField="name" headerText="文件名" textAlign="center" minWidth="150" width="200" itemRenderer="mx.controls.Label"/>
224 <mx:DataGridColumn dataField="type" headerText="类型" textAlign="center" minWidth="50" width="50"/>
225 <mx:DataGridColumn dataField="size" headerText="大小" textAlign="center" minWidth="50" width="60" labelFunction="sizeFormat"/>
226 <mx:DataGridColumn headerText="进度" textAlign="center">
227 <mx:itemRenderer>
228 <fx:Component>
229 <mx:HBox>
230 <fx:Script>
231 <![CDATA[
232 import flash.profiler.showRedrawRegions;
233
234 import mx.controls.Alert;
235 import mx.controls.ProgressBar;
236 import mx.events.FlexEvent;
237 protected function progressbar1_creationCompleteHandler(event:FlexEvent):void
238 {
239 var pb: ProgressBar = event.target as ProgressBar;
240 pb.label = "%3%%";
241 pb.setProgress(0, 100);
242 var f: FileReference = data as FileReference;
243 f.addEventListener(ProgressEvent.PROGRESS,function(event: ProgressEvent): void
244 {
245 pb.setProgress(event.bytesLoaded, event.bytesTotal);
246 });
247 f.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,function (event: DataEvent): void
248 {
249 var result:XML = new XML(event.data);
250 var obj:Object=new Object();
251 obj.status=result.status.toString();
252 obj.message=result.message.toString();
253 ExternalInterface.call(outerDocument.initObject.uploadCallBack.toString(),obj);
254 });
255 }
256 ]]>
257 </fx:Script>
258 <mx:ProgressBar
259 verticalCenter="true"
260 width="100%"
261 paddingLeft="3"
262 paddingRight="5"
263 maximum="100"
264 minimum="0"
265 labelPlacement="center"
266 mode="manual"
267 label="%3%%"
268 textAlign="left"
269 creationComplete="progressbar1_creationCompleteHandler(event)"
270 />
271 </mx:HBox>
272 </fx:Component>
273 </mx:itemRenderer>
274 </mx:DataGridColumn>
275 <mx:DataGridColumn headerText="操作" textAlign="center" width="170" minWidth="170">
276 <mx:itemRenderer>
277 <fx:Component>
278 <mx:HBox width="160" paddingLeft="3">
279 <fx:Script>
280 <![CDATA[
281 import mx.controls.Alert;
282 public function item_cancel_btn_clickHandler(event:MouseEvent):void
283 {
284 var f: FileReference = data as FileReference;
285 f.cancel();
286 }
287 public function item_upload_btn_clickHandler(event:Event):void
288 {
289 try
290 {
291 var file:FileReference=data as FileReference;
292 file.upload(outerDocument.uploadURL);
293 }
294 catch(e:Error)
295 {
296 Alert.show(e.message)
297 }
298
299 }
300 public function item_remove_btn_clickHandler(event:MouseEvent):void
301 {
302 var currFile:FileReference=data as FileReference;
303 var tempArr:Array=new Array();
304 if(outerDocument.isExist(currFile,outerDocument.fileListArray))
305 {
306 for(var i:int=0;i<outerDocument.fileListArray.length;i++)
307 {
308 if(currFile!=outerDocument.fileListArray[i] as FileReference)
309 {
310 tempArr.push(outerDocument.fileListArray[i]);
311 }
312 }
313 }
314 outerDocument.fileListArray=tempArr;
315 outerDocument.fileListDG.dataProvider=outerDocument.fileListArray;
316 }
317 ]]>
318 </fx:Script>
319 <mx:Button label="上传" width="50" id="item_upload_btn" click="item_upload_btn_clickHandler(event)"/>
320 <mx:Button label="取消" width="50" id="item_cancel_btn" click="item_cancel_btn_clickHandler(event)"/>
321 <mx:Button label="删除" width="50" id="item_remove_btn" click="item_remove_btn_clickHandler(event)"/>
322 </mx:HBox>
323 </fx:Component>
324 </mx:itemRenderer>
325 </mx:DataGridColumn>
326 </mx:columns>
327
328 </mx:DataGrid>
329 <s:controlBarContent>
330 <s:Button id="upload_btn" label="上传" click="upload_btn_clickHandler(event)"/>
331 <s:Button id="cancel_btn" label="取消" click="cancel_btn_clickHandler(event)"/>
332 <!--<s:Button id="remove_btn" label="删除" click="remove_btn_clickHandler(event)"/>-->
333 </s:controlBarContent>
334 </s:Panel>
335
336 </s:Application>
HTML页面：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>无标题文档</title>
6 <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
7 </head>
8 <body>
9 <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="400">
10 <param name="movie" value="JFileUploader/JFileUploader.swf"/>
11 <param name="quality" value="high"/>
12 <param name="wmode" value="opaque"/>
13 <param name="swfversion" value="10.0"/>
14 <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->
15 <param name="expressinstall" value="Scripts/expressInstall.swf"/>
16 <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
17 <!--[if !IE]>-->
18 <object type="application/x-shockwave-flash" data="JFileUploader/JFileUploader.swf" width="100%" height="400">
19 <!--<![endif]-->
20 <param name="quality" value="high"/>
21 <param name="wmode" value="opaque"/>
22 <param name="swfversion" value="6.0.65.0"/>
23 <param name="expressinstall" value="Scripts/expressInstall.swf"/>
24 <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
25 <div>
26 <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
27 <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" width="112" height="33"/></a></p>
28 </div>
29 <!--[if !IE]>-->
30 </object>
31 <!--<![endif]-->
32 </object>
33 HTML回调显示：
34 <table width="1178" height="110" border="1">
35 <tr>
36 <td id="result"></td>
37 </tr>
38 </table>
39 <script type="text/javascript">
40 swfobject.registerObject("FlashID");
41 function initJFlieUploader()
42 {
43 var vals=new Object();
44 vals.screenWidth=500;//
45 vals.screenHeight=500;
46 vals.fileSizeMax=1024*1024*100;//byte
47 vals.fileTypeAollow="{AllFiles|*.*},{Images(*.jpg;*.jpeg;*.gif;*.png)|*.jpg;*.jpeg;*.gif;*.png}";
48 vals.uploadURL="FileUpload.do?savePath=upload";
49 vals.note="每个文件不超过"+(vals.fileSizeMax/1024/1024)+"M";
50 vals.uploadCallBack="uploadCallBack";
51 return vals;
52 }
53 function uploadCallBack(result)
54 {
55 document.getElementById("result").innerHTML=result.message;
56 }
57
58 </script>
59 </body>
60 </html>
JAVA服务端页面：
1 package org.lzj.JFileUpload;
2 import java.io.File;
3 import java.io.IOException;
4 import java.io.PrintWriter;
5 import java.util.Iterator;
6 import java.util.List;
7
8 import javax.servlet.ServletException;
9 import javax.servlet.http.HttpServlet;
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpServletResponse;
12
13 import org.apache.commons.fileupload.FileItem;
14 import org.apache.commons.fileupload.FileUploadException;
15 import org.apache.commons.fileupload.disk.DiskFileItemFactory;
16 import org.apache.commons.fileupload.servlet.ServletFileUpload;
17
18 /**
19 *
20 * @author crystal
21 */
22 public class FileUpload extends HttpServlet
23 {
24 private String uploadPath ;
25 public FileUpload()
26 {
27 super();
28 }
29 protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
30 {
31 request.setCharacterEncoding("UTF-8");
32 response.setContentType("text/html; charset=UTF-8");
33 uploadPath=request.getSession().getServletContext().getRealPath("/")+"/"+request.getParameter("savePath")+"/";
34 PrintWriter out = response.getWriter();
35 DiskFileItemFactory factory = new DiskFileItemFactory();
36 factory.setSizeThreshold(4096);
37 ServletFileUpload upload = new ServletFileUpload(factory);
38 UploadResult reslut=new UploadResult();
39 try
40 {
41 List fileItems = upload.parseRequest(request);
42 Iterator iter = fileItems.iterator();
43 while (iter.hasNext())
44 {
45 FileItem item = (FileItem) iter.next();
46 if (!item.isFormField())
47 {
48 try
49 {
50 File dir=new File(uploadPath);
51 if(!dir.exists())
52 {
53 dir.mkdir();
54 }
55 item.write(new File(uploadPath+item.getName()));
56 reslut.setStatus("0");
57 reslut.setMessage("上传成功,存储地址："+uploadPath+item.getName());
58 }
59 catch (Exception e)
60 {
61 reslut.setStatus("1");
62 reslut.setMessage("上传失败"+e.getMessage());
63 e.printStackTrace();
64 }
65 }
66 }
67 }
68 catch (FileUploadException e)
69 {
70 reslut.setStatus("1");
71 reslut.setMessage("上传失败"+e.getMessage());
72 e.printStackTrace();
73 }
74 response.getWriter().print(reslut.toString());
75 }
76
77 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
78 {
79 processRequest(request, response);
80 }
81 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
82 {
83 processRequest(request, response);
84 }
85 }
返回消息BEAN：
1 package org.lzj.JFileUpload;
2 import java.io.Serializable;
3
4
5 public class UploadResult implements Serializable
6 {
7 private String status;
8 private String message;
9 public String getStatus()
10 {
11 return status;
12 }
13 public void setStatus(String status)
14 {
15 this.status = status;
16 }
17 public String getMessage()
18 {
19 return message;
20 }
21 public void setMessage(String message)
22 {
23 this.message = message;
24 }
25
26 public String toString()
27 {
28 return "<?xml version=\"1.0\" encoding=\"utf-8\"?><result><status>"+status+"</status><message>"+message+"</message></result>";
29 }
30 }
效果图：
浙公网安备 33010602011771号