fancyupload3在web中的完美整合

fancyupload是一个利用flash实现多文件上传的项目,官方网站为http://digitarald.de/project/fancyupload/,在一次项目中需要实现多文件上传，Google了一圈，没有找到一个能用的，只有上fancyupload的官方网站看了，发现fancyupload2在IE中已经不可用了，总是提示如下：

其原因作者也没有做出说明，这里笔者也不敢评论！
fancyupload是一个不错的东西，只是它的升级是跨越式的，2.0的使用方式在3.0中有点问题，所以这里就3.0的提出一些注意事项。
1、3.0的应用包不能和2.0混淆，在本文的最后提供整个包下载；
2、3.0的flash文件和前面版本差别太多，所以如果使用的flash版本不对肯定达不到预期的效果
3、官方网站使用的是php上传，目前网上还没有提出任何一个使用servlet上传的，有提出jsp上传的，笔者测试过代码不可用，而且其代码是一次性读取输入流来完成的，这个应该不可取，经测试发现，由于实现的是多文件提交，一次性输入流就会获取所有文件的大小，根本不能区别单个文件。所以在使用servlet或者jsp上传时也要使用form提交的获取方式，上传代码这里不贴出来了，有兴趣的同学可以和我联系，我给个人发一下。

下面介绍一下使用方法：
首先导入js文件：

<script language="javascript" type="text/javascript" src="js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="js/Swiff.Uploader.js"></script>
<script language="javascript" type="text/javascript" src="js/Fx.ProgressBar.js"></script>
<script language="javascript" type="text/javascript" src="js/FancyUpload2.js"></script>

由于js加载顺序问题，这个导入的顺序不要乱套，否则可能出现问题，其中mootools.js只是用来解析返回的json数据的，测试发现这里解析时有点问题，不建议使用该工具。
然后再页面初始化中初始化FancyUpload对象，代码如下：

 window.addEvent('load', function() { 
	  var up = new FancyUpload2($('demo-status'), $('demo-list'), { 
		verbose: true,
		url: 'employeeManage.jhtml?method=importElec&uid='+$map.get("id"),
		path: 'flash/Swiff.Uploader.swf',
		typeFilter: {
			'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
		},
	   target: 'demo-browse',
		onLoad: function() {
			$('demo-status').removeClass('hide'); 
			$('demo-fallback').destroy(); 
			this.target.addEvents({
				click: function() {
					return false;
				},
				mouseenter: function() {
					this.addClass('hover');
				},
				mouseleave: function() {
					this.removeClass('hover');
					this.blur();
				},
				mousedown: function() {
					this.focus();
				}
			});
	
			$('demo-clear').addEvent('click', function() {
				up.remove(); // remove all files
				return false;
			});

			$('demo-upload').addEvent('click', function() {
				up.start(); // start upload
				return false;
			});
		},
		 
		onSelectFail: function(files) {
			files.each(function(file) {
				new Element('li', {
					'class': 'validation-error',
					html: file.validationErrorMessage || file.validationError,
					title: MooTools.lang.get('FancyUpload', 'removeTitle'),
					events: {
						click: function() {
							this.destroy();
						}
					}
				}).inject(this.list, 'top');
			}, this);
		},
		
		onFileSuccess: function(file, response) {
		    response="{status:1}";
			var json = new Hash(JSON.decode(response, true) || {});
			if (json.get('status')=='1') {
				file.element.addClass('file-success');
				file.info.set('html', '<strong>电子档案已经上传:</strong> ' + json.get('width') + ' px ' + json.get('height') + ' px, <em>' + json.get('mime') + '</em>)');
			} else {
				file.element.addClass('file-failed');
				file.info.set('html', '<strong>发生错误:</strong> ' + (json.get('error') ? (json.get('error') + ' #' + json.get('code')) : response));
			}
		},
		onFail: function(error) {
			switch (error) {
				case 'hidden': // works after enabling the movie and clicking refresh
					alert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');
					break;
				case 'blocked': // This no *full* fail, it works after the user clicks the button
					alert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');
					break;
				case 'empty': // Oh oh, wrong path
					alert('A required file was not found, please be patient and we fix this.');
					break;
				case 'flash': // no flash 9+ :(
					alert('To enable the embedded uploader, install the latest Adobe Flash plugin.')
			}
		}
		
	});
	
});

代码中有一些div的Id，是将FancyUpload的一些属性和页面div绑定，接着就是页面代码:

</fieldset>
<div id="demo-status" class="hide">
<p><a href="#" id="demo-browse">选择电子档案</a> | <a href="#"
	id="demo-clear">清除列表</a> | <a href="#" id="demo-upload">开始上传</a></p>
<div>
			<strong class="overall-title"></strong><br />
			<img src="images/bar.gif" class="progress overall-progress" />
	</div>
		<div>
			<strong class="current-title"></strong><br />
			<img src="images/bar.gif" class="progress current-progress" />
		</div>
<div class="current-text"></div>
</div>
<ul id="demo-list"></ul>

这样就完成了fancyupload的加载！
关于fancyupload相关属性的说明这里不再重复，可以看官方网站也可以看http://www.iteye.com/topic/144518这篇帖子！

评论

3 楼 mogui258 2009-11-04  

能不能给我一份，谢谢！

2 楼 mogui258 2009-11-04  

能不能给我一份啊，[e-mail]

1 楼 erikchang 2009-07-11  

看到不少有关fancyupload2的使用jsp上传的例子，个人认为不使用，不能使用输入流来保存数据，这样会造成内存消耗过大，对服务器的负载过大，同时多文件上传也不能一次性保存数据！