项目中经常要用到上传组件,我一直在使用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,导致后台验证权限失败,建议弄个无权限限制路径上传再移到正规路径下
