uploadify2.1.4上传组件应用实例

项目中经常要用到上传组件,我一直在使用uploadify这个组件,感觉挺不错,下面演示下如何使用

1. 先下载uploadify-v2.1.4的包,放到项目里

2. 写调用uploadify的初始化方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="/static/plugin/uploadify/uploadify.css"
	type="text/css" />
<script type="text/javascript" src="/static/plugin/jquery/core.js"></script>
<script type="text/javascript"
	src="/static/plugin/uploadify/jquery.uploadify.v2.1.4.js"></script> <script
	type="text/javascript" src="/static/plugin/uploadify/swfobject.js"></script>
<script type="text/javascript">
	$(function() {
		jQuery("#filedata")
				.uploadify(
						{
							'uploader' : '/static/plugin/uploadify/uploadify.swf?ver=' + new Date()
									.getTime(), //是组件自带的flash，用于打开选取本地文件的按钮 
							/*'buttonImg'	 : '/plugin/uploadify/upload.jpg',
							'width' 		 : 120,
							'height'		 : 30,*/
							'wmode' : 'opaque',
							'script' : 'aa.html',//处理上传的路径，这里使用Struts2是XXX.action 
							'cancelImg' : '/static/plugin/uploadify/cancel.png',//取消上传文件的按钮图片，就是个叉叉
							'sizeLimit' : 20971520, //允许文件上传的大小  20M
							'fileDataName' : 'filedata',//和input的name属性值保持一致就好，Struts2就能处理了
							'queueID' : 'fileQueue',
							'auto' : false,//是否选取文件后自动上传
							'multi' : true,//是否支持多文件上传
							'queueSizeLimit' : 5, //默认上传文件数
							'simUploadLimit' : 5,//每次最大上传文件数
							'buttonText' : 'UPLOAD FILE',//按钮上的文字
							'displayData' : 'percentage',//有speed和percentage两种，一个显示速度，一个显示完成百分比 
							'rollover' : false,
							'fileDesc' : 'txt.',//'支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的 
							'fileExt' : '*.txt',//允许的格式,'*.jpg;*.gif;*.jpeg;*.png;*.bmp' '*.doc;*.pdf;*.rar'
							'onComplete' : function(event, queueID, fileObj,
									response, data) {
								setInterval("showResult()", 2000);//三秒后删除显示的上传成功结果
							},
							'onSelect' : function(event, queueID, fileObj) {
							},
							'onCancel' : function(event, queueId, fileObj, data) {
							},
							'onQueueFull' : function(event, data) {
							}
						});
		jQuery("#filedata1")
		.uploadify(
				{
					'uploader' : '/static/plugin/uploadify/uploadify.swf?ver=' + new Date()
							.getTime(), //是组件自带的flash，用于打开选取本地文件的按钮 
					/*'buttonImg'	 : '/plugin/uploadify/upload.jpg',
					'width' 		 : 120,
					'height'		 : 30,*/
					'wmode' : 'opaque',
					'script' : 'aa.html',//处理上传的路径，这里使用Struts2是XXX.action 
					'cancelImg' : '/static/plugin/uploadify/cancel.png',//取消上传文件的按钮图片，就是个叉叉
					'sizeLimit' : 20971520, //允许文件上传的大小  20M
					'fileDataName' : 'filedata1',//和input的name属性值保持一致就好，Struts2就能处理了
					'queueID' : 'fileQueue1',
					'auto' : false,//是否选取文件后自动上传
					'multi' : true,//是否支持多文件上传
					'queueSizeLimit' : 5, //默认上传文件数
					'simUploadLimit' : 5,//每次最大上传文件数
					'buttonText' : 'UPLOAD FILE',//按钮上的文字
					'displayData' : 'percentage',//有speed和percentage两种，一个显示速度，一个显示完成百分比 
					'rollover' : false,
					'fileDesc' : 'txt.',//'支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的 
					'fileExt' : '*.txt',//允许的格式,'*.jpg;*.gif;*.jpeg;*.png;*.bmp' '*.doc;*.pdf;*.rar'
					'onComplete' : function(event, queueID, fileObj,
							response, data) {
						setInterval("showResult()", 2000);//三秒后删除显示的上传成功结果
					},
					'onSelect' : function(event, queueID, fileObj) {
					},
					'onCancel' : function(event, queueId, fileObj, data) {
					},
					'onQueueFull' : function(event, data) {
					}
				});
	});
	function uploadFile() {//上传文件
		jQuery('#filedata').uploadifyUpload();
	}
	function cancleUpload() {
		jQuery('#filedata').uploadifyClearQueue();
	}
	function uploadFile1() {//上传文件
		jQuery('#filedata1').uploadifyUpload();
	}
	function cancleUpload1() {
		jQuery('#filedata1').uploadifyClearQueue();
	}

	function up(){
		alert('触发了表单提交----要先上传完文件才能提交!');
		uploadFile();
		uploadFile1();
		return false;
	}
</script>

</head>
<body leftmargin="8" topmargin="8" background=''>
<form action="aa.html" method="post" onsubmit="return up();">
<div>
<div id="fileQueue"></div>
<input type="file" name="filedata" id="filedata" />
<div id="result"></div>
<!--显示结果--></div>
<br />
<hr />
<div>
<div id="fileQueue1"></div>
<input type="file" name="filedata1" id="filedata1" />
<div id="result1"></div>
<!--显示结果--></div>
<input type="submit" value="提交表单" />
</form>
</body>
</html>

3. 最后测试页面,有个需要注意的地方,就是上传路径不能有权限控制的,因为uploadify会丢失session,导致后台验证权限失败,建议弄个无权限限制路径上传再移到正规路径下