使用flex4制作带进度条的多文件上传-优快云博客

本文介绍了一种使用Flex实现的多文件上传控件，包括前端交互和后端服务器处理流程，详细解释了如何一次选择多个文件进行上传，并显示上传进度条。同时，提供了一个简单的JSP页面集成示例以及服务器端代码实现，确保文件上传的正确性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

普通的html表单提交无法一次选择多文件上传，并且显示上传进度条比较麻烦。所以用flex做了一个多文件上传控件和大家分享
FileUpload.mxml


<?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" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="12" creationComplete="init()">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>  
		<![CDATA[ 
			import flash.events.*;

			import mx.collections.ArrayList;
			import mx.core.FlexGlobals;

			private var files : FileReferenceList;
			[Bindable]
			private var fileArray : ArrayList;

			private var serverUrl : String;
			private var userId : String;
			private var allowTypes : XML;

			private function init() : void {
				Security.allowDomain("*");
				var params : Object = FlexGlobals.topLevelApplication.parameters;

				serverUrl = encodeURI(parameters.serverUrl);
				userId = params.userId;
				allowTypes = new XML( encodeURI(params.allowTypes) );
				trace(userId);
				trace(serverUrl);
				trace(allowTypes.children());

				files=new FileReferenceList();
				files.addEventListener(Event.SELECT, onSelect);

			}

			private function upload() : void {
				var types : Array = new Array();
				var typeXml : XMLList = allowTypes.children();

				for(var i : int = 0; i < typeXml.length(); i++ ) {
					types.push( new FileFilter( typeXml[i].@name, typeXml[i].@pattern ) );
				}

				files.browse(types);
			}    

			private function onSelect(e:Event) : void {
				var request:URLRequest=new URLRequest(serverUrl);

				fileArray = new ArrayList(files.fileList);
				ExternalInterface.call("onFileSelect", fileArray.length);
				for(var i:int = 0; i < fileArray.length; i++) {
					var file:FileReference = fileArray.source[i] as FileReference;
					file.upload(request);
				}
			}

		]]>  
	</fx:Script>  

	<s:VGroup>
		<s:Button label="上传文件" click="upload();" />
		<s:List dataProvider="{fileArray}" itemRenderer="FileItem" borderVisible="false"/>
	</s:VGroup>
</s:Application>

FileItem.mxml


<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
		   xmlns:s="library://ns.adobe.com/flex/spark" 
		   xmlns:mx="library://ns.adobe.com/flex/mx" >

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			private var _data:Object;

			override public function set data( obj : Object ) : void { 
				this._data = obj; 
				var file : FileReference = (this._data as FileReference);
				file.addEventListener(ProgressEvent.PROGRESS, onProgress); 
				file.addEventListener(Event.COMPLETE, onComplete);
				fileName.text = file.name;
			}

			override public function get data() : Object { 
				return this._data; 
			}

			private function onProgress(e:ProgressEvent) : void {
				cancelBtn.visible = true;

				var loaded : uint = e.bytesLoaded / 1024;
				var total : uint =  e.bytesTotal / 1024;  
				var proc:uint = e.bytesLoaded / e.bytesTotal * 100;    
				bar.setProgress(proc, 100);
				bar.label = proc + "%";
				labelProgress.text = loaded + "kb / " + total + "kb";
			}

			private function onComplete(e:Event) : void {
				cancelBtn.visible = false;
				ExternalInterface.call("onUploadComplete");
			}

			private function cancelUpload(e:Event) : void {
				var file : FileReference = (this._data as FileReference);
				file.cancel();
			}
		]]>
	</fx:Script>
	<s:states>
		<s:State name="normal"/>
		<s:State name="hovered"/>
		<s:State name="selected" />
	</s:states>

	<s:layout>
		<s:VerticalLayout/>
	</s:layout>

	<s:HGroup verticalAlign="middle" paddingTop="5" paddingBottom="5">
		<s:Label id="fileName"/>
		<mx:ProgressBar id="bar"    
						labelPlacement="center"    
						minimum="0"    
						visible="true"    
						maximum="100"    
						label="0%"    
						direction="right"    
						mode="manual"    
						width="200"/>
		<s:Label id="labelProgress" />
		<s:Button id="cancelBtn" label="取消" click="cancelUpload(event)" visible="false" />
	</s:HGroup>

</s:ItemRenderer>

jsp引入部分


<script type="text/javascript" src="<c:url value="/assets/js/lib/upload/swfobject.js"/>"></script>
<div style="height: 200px; width: 500px;">
		<div id="flashContent">
	       	<p>
	        	To view this page ensure that Adobe Flash Player version 
				10.0.0 or greater is installed. 
			</p>
			<script type="text/javascript"> 
				var pageHost = ((document.location.protocol == "https:") ? "https://" :	"http://"); 
				document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
								+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
			</script> 
	    </div>
	</div>
<script type="text/javascript">
<!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
var swfVersionStr = "10.0.0";
<!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
var xiSwfUrlStr = "${contextPath}/assets/js/lib/upload/playerProductInstall.swf";
var flashvars = {};

flashvars.serverUrl = "${contextPath}/app/sys/file/upload;jsessionid=" + "<%= request.getSession().getId() %>";
flashvars.allowTypes =
'<?xml version="1.0" encoding="UTF-8"?>'
+ '<allowTypes>'
	+ '<type name="图像" pattern="*.jpg;*.jpeg;*.png;*.gif" />'
	+ '<type name="文档" pattern="*.pdf;*.doc;*.txt" />'
	+ '<type name="视频" pattern="*.avi;*.flv;*.rmvb" />'
	+ '<type name="全部" pattern="*" />'
+ '</allowTypes>';

var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "FileUpload";
attributes.name = "FileUpload";
attributes.align = "middle";
swfobject.embedSWF(
    "${contextPath}/assets/js/lib/upload/FileUpload.swf", "flashContent", 
    "100%", "100%", 
    swfVersionStr, xiSwfUrlStr, 
    flashvars, params, attributes);
<!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
swfobject.createCSS("#flashContent", "display:block;text-align:left;");

var fileNum;
function onFileSelect(num) {
	fileNum = num;
}

function onUploadComplete() {
	fileNum--;
	if(fileNum < 0) {
		showMsg("addRet", "文件上传成功！");
		$grid.reload();
	}
}
</script>

服务端接受文件代码


@RequestMapping(value = "/file/upload", method = RequestMethod.POST)
	public @ResponseBody
	String upload(HttpServletRequest request) {
		User user = (User) request.getSession().getAttribute(
				AuthenticationService.CURRENT_USER);
		Set<MultipartFile> mfs = getFileSet(request);

		for (MultipartFile mf : mfs) {
			String originalFilename = mf.getOriginalFilename();
			String name = originalFilename.substring(0,
					originalFilename.lastIndexOf(".")).toLowerCase();
			String extName = originalFilename.substring(
					originalFilename.lastIndexOf(".")).toLowerCase();

			GenericFile file = new GenericFile();
			file.setName(name);
			file.setExtName(extName);
			try {
				file.setFile(mf.getBytes());
			} catch (IOException e) {
				e.printStackTrace();
			}
			file.setUserId(user.getId());
			file = fileService.save(file);
			log.info("save file {}", file.getId());
		}

		int mfsSize = mfs.size();
		log.info("file size {}", mfsSize);

		return mfsSize > 0 ? "true" : "false";
	}

private Set<MultipartFile> getFileSet(HttpServletRequest request) {
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		Set<MultipartFile> fileset = new LinkedHashSet<MultipartFile>();
		for (Iterator<String> it = multipartRequest.getFileNames(); it
				.hasNext();) {
			String key = it.next();
			MultipartFile file = multipartRequest.getFile(key);
			if (file.getOriginalFilename().length() > 0) {
				log.info("file name [{}]", file.getOriginalFilename());
				fileset.add(file);
			}
		}
		return fileset;
	}