FancyUpload3 文件上传

来源：互联网发布：去视频马赛克软件编辑：程序博客网时间：2024/06/05 04:57

fancyupload是一个不错的东西，只是它的升级是跨越式的，2.0的使用方式在3.0中有点问题，所以这里就3.0的提出一些注意事项。
1、3.0的应用包不能和2.0混淆，在本文的最后提供整个包下载；
2、3.0的flash文件和前面版本差别太多，所以如果使用的flash版本不对肯定达不到预期的效果
3、官方网站使用的是php上传，用jsp 也可以实现

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

<script type="text/javascript" src="thirdparty/mootools/mootools.js?${VERSION}"></script><script type="text/javascript" src="thirdparty/mootools/mootools.lang.js?${VERSION}"></script><script type="text/javascript" src="thirdparty/fancyupload/Swiff.Uploader.js?${VERSION}"></script><script type="text/javascript" src="thirdparty/fancyupload/Fx.ProgressBar.js?${VERSION}"></script><script type="text/javascript" src="thirdparty/fancyupload/FancyUpload3.Attach.js?${VERSION}"></script><script type="text/javascript" src="thirdparty/fancyupload/lang.ch.js?${VERSION}"></script>

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

initTaskUpload : function() { // wait for the contentMooTools.lang.setLanguage('cnCHS');MooTools.lang.set('cnCHS', 'FancyUpload', {"fileName": '{name}'});filefail=0;filesuccess=0;filecount=0;up = new FancyUpload3.Attach('demo-list', '#demo-attach',{path: resourceContextPath + 'thirdparty/fancyupload/Swiff.Uploader.swf',url: contextPath + "/calendarinfoprojectfile/edittask/do_swfupload.do",instantStart : false,fieldName : 'attach',fileSizeMax : 1024*512*1024*1, //512queued: 1,onLoad: function() {this.target.addEvents({click: function() {return false;},mouseenter: function() {this.addClass('hover');},mouseleave: function() {this.removeClass('hover');this.blur();},mousedown: function() {this.focus();}});//$('demo-upload').addEvent('click', function() {//var url = contextPath + "/calendarinfoprojectfile/do_swfupload.do";//up.setOptions({url : encodeURI(url)});//up.start();////});},onSelectFail:function(files){   AppUtils.AlertBox("上传文件有误，文件不能小于500B或大于512MB或文件重复!");   return ;},onFileSuccess: function(file, response) {var json = JSON.decode(response);if (json.status == '1') {filesuccess++;var file={'fileName':json.fileName,'fileSize':json.fileSize,'fileType':getFileType(json.fileName)};var pss = P.parent.CalendarTask;if(pss){pss.initFileList(file);pss.viewFileList(file);}}},onFileRemove:function(){if(jQuery("#demo-list").find('.file').length - 1 == 0){jQuery('#demo-upload').addClass('hide');jQuery('#demo-clear').addClass('hide');}},onFileError: function(file) {filefail--;file.ui.cancel.set('html', 'Retry').removeEvents().addEvent('click', function() {file.requeue();return false;});new Element('span', {html: file.errorMessage,'class': 'file-error'}).inject(file.ui.cancel, 'after');},onSelectSuccess:function(){jQuery('#demo-clear').removeClass('hide');jQuery('#demo-upload').removeClass('hide');}});}

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

<div><div id="demo-list"></div><button id="demo-attach" type="button" class="btn-4 marginleft" ><span class="ui-icon ui-icon-plusthick"></span>添加文件</button> <span class="help-inline">单个文件大小限制为512MB</span></div>

这样就完成了fancyupload的加载

附带一些参数说明

url
文件上传的地址，如果不指定，那么将会自动取文件域所在的表单的action值来进行上传。如果表单的action也没有指定值，那么将尝试获取路径栏中的地址来进行文件上传。一般而言我们都需要指定该参数和文件域所在的表单的action两者之一！
swf
就是组件中的flash文件了，主要是用来选择文件和过滤等，基本上可以不用设置。
multiple
是否允许选择多个文件，默认是true。这个多选是指在打开的文件对话框中按住ctr键进行多文件的选中。
queued
是否允许队列上传，默认是true。
types
指定上传文件的类型，采用的格式是 {提示信息:文件类型}，如只允许媒体文件上传的例子：{“媒体文件(*.rm,*.avi)” : “*.rm; *.avi”}
limitSize
指定限制的文件大小，单位是字节！默认是不限制，超过此值的文件将不被选中，注意即使选择后系统也没有提示，但是队列中也是没有该文件的！可以通过修改文件FancyUpload.js，在其128行的if语句中加上一个alert提示即可！
limitFiles
限制的文件个数，默认是不限制！
createReplacement
一个自定义函数（参数为文件域对象），用来替换文件域，默认是被替换成为一个按钮！具体的代码可以参考FancyUpload.js中的第101到111行的代码。默认我已经将其按钮的值改成了中文的“浏览文件”。
instantStart
表示选择文件后是否立即开始上传，默认是false！也建议不要设置为true，上传的操作我们可以交给该文件域所在表单的提交按钮，这也是自动绑定的，无须我们做任何操作。
allowDuplicates
是否允许队列中选择重复的文件，默认是false！注释中是true，而代码中是false，所以以代码中的为准。
container
flash文件的容器对象，默认是document.body，可以不用修改！
optionFxDuration
文件添加到队列后，其高亮度到消失高亮度的时间，默认是250ms！也就是渐逝的时间长度。
queueList
来列表显示文件队列的容器对象或其ID。
onComplete
单个文件上传成功后调用的方法，非AJAX，无回调参数。每个文件上传成功后都将调用该方法一次！
onAllComplete
所有文件上传成功后的调用方法！

0 0