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这篇帖子!
- 大小: 6.2 KB
分享到:
- 2009-07-10 13:02
- 浏览 3514
- 评论(3)
- 论坛回复 / 浏览 (1 / 5213)
- 查看更多
相关推荐
FancyUpload 多文件上传-------------
fancyupload 通过ajax 和 flash 实现多文件上传! 整个工程的编程是utf-8. 现将源代码分享给大家... 支持flash10
FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload。
Ajax+Flash多文件上传是一个开源的上传组件,名称是FancyUpload,其官方网址是:http://digitarald.de/project/fancyupload/。这个组件仅仅是客户端的应用组件,即与任何服务器端的技术...下载文件后将其复制到项目中
之前FancyUpload2.0版本的在IE下已不能用了。在网上FancyUpload 3.0 结合Asp.net 使用的例子几乎找不到,所以就做了一个FancyUpload 3.0 For Asp.net 的Demo,方便大家学习或使用。 这个Demo 在IE各个版本和Firefox...
swfupload+fancyupload两个完整java项目 在eclipse里面测试成功 用于多文件上传 过滤文件格式
Ajax+Flash多文件上传之FancyUpload的应用
ajax上传即fancyUpload上传完整例子 index.html是ajax上传 test.html是fancyUpload.swf上传,在选择文件窗口一次可以选择多个哦。
NULL 博文链接:https://struts.iteye.com/blog/281691
digitarald-digitarald-fancyupload.zip
jsp例子 可以一次选择多个文件上传 tomcat下部署即可用 绝对好用
digitarald-fancyupload, Swiff满足Ajax强大而优雅的上传( MooTools插件) 功能 FancyUpload - Swiff满足 Ajax以英镑为代价的Swiff 满足了强大而优雅的上传功能的收费。 FancyUpload是一个文件输入替换,它具有一个...
都是我从不同网站上辛苦下下来了,整合在一起了,很多关于文件上传过滤文件格式多文件上传的代码资料和完整项目,包括uploadify fancyupload SwfUpload等不同的方法,需要对你们有帮助。
1. FancyUpload (演示地址) FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload。...支持在同一个”Open File”对话框中一次性选择多个文件。文件扩展名过滤,
WebAttach 是一个基于 Web 的小型文件上传器。 它使用fancyupload 进行基于flash 的文件上传,并提供非flash 回退解决方案。 随意做任何你想做的事情 - 如果你对错误提供反馈或者你有改进的想法,那就太好了。
OneupUploaderBundle 用于Symfony的OneupUploaderBundle添加了对使用以下JavaScript库之一或来处理文件上传...文档的入口点可以在文件Resources/docs/index.md 升级说明 3.0.0版现在支持Symfony 5(对@ ,@ ,@ ,@ 和
通过下载其他资源发现在新的flash10插件下均有错误,fancyupload插件,修改错误实现实现多个文件公用一个file上传,后台代码采用php,可以是jsp或asp等。
1. eXtplorer ...你可以用它浏览服务器上的文件与目录。编辑,复制,移动,删除文件。搜索,上传和删除文件。创建新的文件和目录。...集成FancyUpload3(带上传进度条提醒)实现文件上传。当上传的图片比较
ajax+flash无刷新同时选多文件上传(fancyupload) asp.net(C#)示例