项目中经常要用到上传组件,我一直在使用uploadify这个组件,感觉挺不错,下面演示下如何使用
1. 先下载uploadify-v2.1.4的包,放到项目里
2. 写调用uploadify的初始化方法
function upfile(url, id1, id2){
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' : url+'?ver='+new Date().getTime(),//处理上传的路径，这里使用Struts2是XXX.action
'cancelImg' : '/static/plugin/uploadify/cancel.png',//取消上传文件的按钮图片，就是个叉叉
'sizeLimit' : 20971520, //允许文件上传的大小 20M
'fileDataName' : 'filedata',//和input的name属性值保持一致就好，Struts2就能处理了
'queueID' : 'fileQueue',
'auto' : true,//是否选取文件后自动上传
'multi' : true,//是否支持多文件上传
'queueSizeLimit' : 1, //默认上传文件数
'simUploadLimit' : 1,//每次最大上传文件数
'buttonText' : 'UPLOAD FILE',//按钮上的文字
'displayData' : 'percentage',//有speed和percentage两种，一个显示速度，一个显示完成百分比
'rollover' : false,
'fileDesc' : '*.*',//'支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的
'fileExt' : '*.*',//允许的格式,'*.jpg;*.gif;*.jpeg;*.png;*.bmp' '*.doc;*.pdf;*.rar'
'onComplete' : function (event, queueID, fileObj, response, data){
jQuery("#"+id1).text(response);
jQuery("#"+id2).val(response);
jQuery("#result").html("您已成功上传了文件!");//显示上传成功结果
setInterval("showResult()",2000);//三秒后删除显示的上传成功结果
},
'onSelect' : function(event, queueID, fileObj){
},
'onCancel' : function(event, queueId, fileObj, data){
jQuery('#filedata').uploadifyCancel(queueId);
},
'onQueueFull' : function (event, data){
}
});
}
function showResult(){//删除显示的上传成功结果
jQuery("#result").html("");
}
function uploadFile(){//上传文件
jQuery('#filedata').uploadifyUpload();
}
function cancleUpload(){
jQuery('#filedata').uploadifyClearQueue();
}
3. 写前台页面,引入uploadify的相关css和js
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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" />
<!-- JavaScript Skin -->
<link rel="stylesheet" href="<%=path %>/static/plugin/uploadify/uploadify.css" type="text/css" />
<script type="text/javascript" src="<%=path %>/static/plugin/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript" src="<%=path %>/static/plugin/uploadify/swfobject.js"></script>
<script type="text/javascript" src="<%=path %>/static/plugin/uploadify/upload.js"></script>
<script type="text/javascript">
$(function(){
upfile('<%=path %>/server/upload!execute.action', 'filename', 'file'); // 上传文件
});
</script>
</head>
<body leftmargin="8" topmargin="8" background='/static/skin/server/images/allbg.gif'>
<!-- head -->
<div id="head"></div>
<!-- 数据提交表单 -->
<form id="submitForm" method="post">
<input type="hidden" id="file" name="warnSound.file" value="" />
<table width="98%" border="0" cellpadding="2" cellspacing="1" bgcolor="#D1DDAA" align="center" style="margin-top:8px">
<tr bgcolor="#E7E7E7">
<td height="24" colspan="2" background="/static/skin/server/images/tbg.gif">新增警告声音</td>
</tr>
<tr align="left" bgcolor="#FAFAF1">
<td width="15%">文件名:</td>
<td width="85%"><label id="filename"></label></td>
</tr>
<tr align="left" bgcolor="#FAFAF1">
<td width="15%">上传文件:</td>
<td width="85%">
<div>
<div id="fileQueue"></div>
<input type="file" name="filedata" id="filedata" />
<div id="result"></div><!--显示结果-->
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
4. 最后测试页面,有个需要注意的地方,就是上传路径不能有权限控制的,因为uploadify会丢失session,导致后台验证权限失败,建议弄个无权限限制路径上传再移到正规路径下