Uploadify Version 3.2的使用

注：截至目前最新的版本是Uploadify 3.2，注意在使用时看清楚版本，因为旧版本和新版本所提供的参数设置有很大差别。 1、引入Uploadify所需的JS及CSS文件 link id=easyuiTheme rel=stylesheet href=/js/uploadify/uploadify.css type=text/css/linkscript ty

注：截至目前最新的版本是Uploadify 3.2，注意在使用时看清楚版本，因为旧版本和新版本所提供的参数设置有很大差别。

1、引入Uploadify所需的JS及CSS文件

<link id="easyuiTheme" rel="stylesheet" href="/js/uploadify/uploadify.css" type="text/css"><script type="text/javascript" src="/js/uploadify/swfobject.js" charset="utf-8"></script><script type="text/javascript" src="/js/uploadify/jquery.uploadify.js" charset="utf-8"></script>

如上所示同时也要引入swfobject.js这个插件，最好使用最新的版本，当然，JQUERY的基础库那也是必须要引入的（jquery-1.8.0.min.js）
2、使用方法

$(function() {		$("#documentfile").uploadify({                                         //请求路径，这里我请求的是struts2的action,但是在请求路径后加了.action，就无法提交。                                        'uploader': '${pageContext.request.contextPath}/uploads/control_projectDocument_addDocumentVersion',			'swf':'${pageContext.request.contextPath}/js/uploadify/uploadify.swf',//引入uploadify提供的swf文件			'cancelImg': 'js/uploadify/uploadify-cancel.png',//取消按钮			'queueID': 'fileQueue',//文件选择后所要存放的容器			'wmode' : 'transparent', 			'debug' : false,//是否开启调试			 'auto': false,//是否开启自动上传             'multi': true,             'fileObjName':'documentfile',//上传文件input type=file的名称             'width':84,//宽度             'height':24,//高度             'buttonText':'',//改变上传按钮的文本             'preventCaching':true,             'removeTimeout':1,             //不执行默认的onSelect事件 	        'overrideEvents' : ['onDialogClose'], 	        'fileTypeDesc':'支持的格式：', //在浏览窗口底部的文件类型下拉菜单中显示的文本  	        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png;*.bmp;*.swf;*.doc;*.txt;*.xls;*.ppt;*.pdf;*.xlsx;*.docx;*.pptx;*.mpp',//允许上传的文件后缀	        'fileSizeLimit':'50MB',//上传文件的大小限制	        'queueSizeLimit' : 5,//上传数量	        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {//每次更新上传的文件的进展	             //利用这个方法可以自定义上传进度，	             //使用方法见官方说明	        }<p style="color:transparent">本文来源gao!%daima.com搞$代*!码$网3</p>,	        //选择上传文件后调用	        'onSelect' : function(file) {	        },	        //返回一个错误，选择文件的时候触发	        'onSelectError':function(file, errorCode, errorMsg){	            switch(errorCode) {	                case -100:	                	$.messager.alert('提示',"上传的文件数量已经超出系统限制的"+$('#documentfile').uploadify('settings','queueSizeLimit')+"个文件！");	                    break;	                case -110:	                	$.messager.alert('提示',"文件 ["+file.name+"] 大小超出系统限制的"+$('#uploadify').uploadify('settings','fileSizeLimit')+"大小！");	                    break;	                case -120:	                	$.messager.alert('提示',"文件 ["+file.name+"] 大小异常！");	                    break;	                case -130:	                	$.messager.alert('提示',"文件 ["+file.name+"] 类型不正确！");	                    break;	            }	        },	        //检测FLASH失败调用	        'onFallback':function(){	            $.messager.alert('提示',"您未安装FLASH控件，无法上传图片！请安装FLASH控件后重启浏览器再试");	        },	        //上传到服务器，服务器返回相应信息到data里	        'onUploadSuccess':function(file, data, response){	        	$('#' + file.id).find('.data').html(' - 完成');	        	$('#documentfile').uploadify('upload');	        	var r = $				.parseJSON(data);	        	$.messager.show({					msg : r.msg,					title : '提示'				});	        }		});	});

3.所支持的表单

<div id="fileQueue" style="height:200px;background-color: #F5F5F5;overflow:auto;width: 347px"></div>

4.在使用时，通常除了上传的文件外，还需传入其它参数可以使用settings属性进行设置

//在上传文件时，判断是否选择了文件if($('#fileQueue').html()==""){    alert('提示',"请先选择文件！");}//设置其它要传入后台的参数，格式如下$('#documentfile').uploadify('settings', 'formData', {         'projectDocument.pid':$('#admin_xmwd_treegrid').propertygrid('getSelected').id,        'version':$('#version').val()});$('#documentfile').uploadify('upload');//执行上传操作

到此位置，uploadify的基本使用就算完成。

uploadify3.2压缩包下载地址：下载Uploadify使用所需文件

喜欢 (0)赏

[搞代码]

分享 (0)