普通的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;
}
分享到:
相关推荐
总之,结合Flash和Flex制作进度条是一种创新的实践,它能充分利用两者的优点,提供美观且交互性强的用户体验。对于开发者来说,这种技术可以帮助他们打造出独特且吸引人的应用程序界面,提升产品的整体质量。
在Flash和Flex中,文件上传功能通常涉及到用户界面设计、数据传输以及服务器端处理等多个环节。 首先,让我们深入了解一下Flash中的文件选择和上传过程。在Flex中,可以使用FileReference类来实现这一功能。...
首先,**Flash**是一种曾经广泛使用的交互式内容创建平台,它允许开发者制作动画、游戏以及富媒体应用,包括在网络浏览器中实现文件上传功能。在HTML5出现之前,Flash是实现动态交互效果的主要工具,尤其是对于那些...
标题中的“Flash制作的上传文件控件”是指利用Adobe Flash技术创建的一种交互式组件,用于在网页上实现文件上传功能。这种控件通常由ActionScript编写,ActionScript是Flash平台上的编程语言,允许开发者创建动态...
这里需要使用HTML的文件上传控件,并允许选择多个文件。同时,场景和风格的选择需要提供下拉菜单,DeepSeek提供了10个场景和10种风格,代码中有列出这些选项,比如场景可以是现代都市、奇幻森林等,风格可以是电影...
总结起来,这个压缩包文件的学习资料涵盖了前端开发中的关键技术和实践,包括使用AJAX进行无刷新文件上传,利用jQuery简化交互处理,以及可能结合Flex实现更高级的UI效果。对于想要提升前端技能,特别是处理文件上传...
FLEX技术在此项目中扮演了重要的角色,通过在网页中嵌入FLEX制作的上传控件,实现了多文件上传及上传进度条显示,即使存在不支持断点续传和进度显示只能从客户端获取的限制,FLEX上传控件的界面美观和稳定性能仍满足...
SWFUpload是一个基于Flash的文件上传组件,能够提供多文件选择、文件类型验证、进度条显示等功能。Servlet则是Java平台上的服务器端技术,用于扩展应用程序服务器的能力。这三者的结合通常用于构建具有文件上传功能...
4. 技能列表:用无序列表`<ul>`和列表项`<li>`列举技能,可添加进度条元素`<progress>`展示熟练程度。 5. 项目经验:使用`<h2>`列出项目,`<p>`描述项目详情。 6. 推荐信或引用:如果有的话,可作为单独部分展示。...
- 将HTML文件上传至个人网站或在线简历平台,让更多潜在雇主看到。 通过以上步骤,你可以构建一个功能齐全、设计精美的HTML简历,充分展示自己的才华和专业素养。记得保持简洁明了,让信息一目了然,同时利用HTML...