Flex文件上传

最新推荐文章于 2015-06-10 16:40:57 发布

最新推荐文章于 2015-06-10 16:40:57 发布 · 168 阅读

文章标签：

#Flex #Spring #Adobe #Security #HTML

Flex Flash 专栏收录该内容

63 篇文章

订阅专栏

本文介绍如何使用Flex结合Java实现文件上传功能。通过FileReference组件处理文件选择及上传进度，并利用Spring框架处理服务器端文件接收。代码示例涵盖了客户端上传逻辑及服务器端文件保存过程。

使用Flex + Java实现文件上传

Flex主要使用FileReference，代码如下

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init()">
	
	<mx:Script>
		[CDATA[
			
			private const defaultRequestUrl : String = "http://localhost:8080/flexFileUploadServer/uploadServlet.do";
			
			private var file : FileReference;
			
			private function init():void {
				Security.allowDomain("*");
				
				file = new FileReference();
				file.addEventListener(Event.SELECT, onFileSelect);
				file.addEventListener(ProgressEvent.PROGRESS, progressHandle);
				file.addEventListener(Event.COMPLETE, completeHandle);
				//file.addEventListener(Event.OPEN, openHandle);
				//file.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
				//file.addEventListener(Event.CANCEL, cancelHandler);
			}
			
			private function onClickBrowserBtn() : void {
				file.browse(getTypeFilter());
			}
			
			private function getTypeFilter() : Array {
				var imagesFilter:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png");
				//var docFilter:FileFilter = new FileFilter("Documents", "*.pdf;*.doc;*.txt");
				
				return [imagesFilter];
			}
			
			private function onFileSelect(event : Event) : void {
				uploadBtn.enabled = true;
				infoText.htmlText = 
					"Name: " + file.name + "<br/>" + 
					"Size: " + file.size + "<br/>" + 
					"Type: " + file.type + "<br/>" + 
					"Date: " + file.creationDate;
			}
			
			private function onClickUploadBtn() : void {
				var request : URLRequest = new URLRequest(defaultRequestUrl);
				request.data = "userId=123";
				file.upload(request);
			}
			
			private function progressHandle(event : ProgressEvent) : void {
				progressLabel.text = "complete " + event.bytesLoaded + " bytes";
				var fileUploadPercent : uint = event.bytesLoaded / event.bytesTotal * 100;
				uploadProgressBar.setProgress(fileUploadPercent, 100);
				uploadProgressBar.label = "Complete " + fileUploadPercent + "%";
			}
			
			private function completeHandle(event : Event) : void {
				infoText.htmlText = "Upload " + file.name + " Complete!";
				uploadBtn.enabled = false;
			}
		]]
	</mx:Script>
	
	<mx:Button id="browserBtn" x="10" y="69" label="Browser" 
		click="onClickBrowserBtn()"/>
		
	<mx:Button id="uploadBtn" x="236" y="69" label="Upload" enabled="false" 
		click="onClickUploadBtn()"/>
		
	<mx:ProgressBar id="uploadProgressBar" x="10" y="33" width="291" 
		themeColor="#009dff" maximum="100" direction="right" mode="manual"/>
		
	<mx:TextArea id="infoText" x="10" y="99" width="291" height="131"/>
	<mx:Label id="progressLabel" x="10" y="10" width="291"/>
	
</mx:Application>

Java使用Spring的MultipartHttpServletRequest, 代码如下

	public void saveFile(HttpServletRequest request, HttpServletResponse response) 
		throws IllegalStateException, IOException {
		
		CommonsMultipartResolver commonsMultipartResolver = 
			new CommonsMultipartResolver(request.getSession().getServletContext());
		commonsMultipartResolver.setDefaultEncoding("utf-8");
		
		if (commonsMultipartResolver.isMultipart(request)) {  
			MultipartHttpServletRequest multipartRequest = 
				commonsMultipartResolver.resolveMultipart(request);  

			Iterator iter = multipartRequest.getFileNames();
			for (;iter.hasNext();) {
				MultipartFile file = multipartRequest.getFile((String)iter.next());
				if (file != null) {
					File localFile = new File(file.getOriginalFilename());
					file.transferTo(localFile);
				}
			} 
			System.out.println("userId: " + request.getParameter("userId"));
		}
	}

当然也可以采用纯commons-fileupload-1.1.1.jar的实现代码，这个网上例子很多，这里就不写了。

参考

http://www.cnblogs.com/dannyr/archive/2006/11/13/559006.html

http://swingchen.bokee.com/5943371.html