使用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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值