- 插件官方地址 http://www.uploadify.com/
- 下载解压获得:cancel.png、jquery.uploadify.v2.1.0.js、swfobject.js、uploadify.css、uploadify.swf
- 放到 webRoot/js/uploadify 下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Upload</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="<%=basePath %>js/uploadify/uploadify.css"/>
<script type="text/javascript" src="<%=basePath %>js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="<%=basePath %>js/uploadify/swfobject.js"></script>
<script type="text/javascript" src="<%=basePath %>js/uploadify/jquery.uploadify.v2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#file").uploadify({
/*注意前面需要书写path的代码*/
'uploader' : '<%=basePath%>js/uploadify/uploadify.swf',
'script' : '<%=basePath%>UploadAction.do',
'cancelImg' : '<%=basePath%>js/uploadify/cancel.png',
'queueID' : 'fileQueue', //和存放队列的DIV的id一致
'fileDataName' : 'file', //和以下input的name属性一致
'auto' : false, //是否自动开始
'multi' : false, //是否支持多文件上传
'buttonText' : 'Browse', //按钮上的文字
'simUploadLimit' : 1, //一次同步上传的文件数目
'sizeLimit' : 19871202, //设置单个文件大小限制
'queueSizeLimit' : 1, //队列中同时存在的文件个数限制
'fileDesc' : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性,那么这个属性是必须的
'fileExt' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式
onComplete: function (event, queueID, fileObj, response, data) {
$('<li></li>').appendTo('.files').text(response);
},
onError: function(event, queueID, fileObj) {
alert("文件:" + fileObj.name + "上传失败");
},
onCancel: function(event, queueID, fileObj){
alert("取消了" + fileObj.name);
}
});
});
function uploadifyUpload(){
$('#file').uploadifyUpload();
}
</script>
</head>
<body>
<table>
<tr>
<td class="title">图片文件<span class="ff0000"> *</span></td>
<td colspan="3">
<input type="file" name="file" id="file" />
<div id="fileQueue"></div>
<p>
<a href="javascript:;" onClick="javascript:uploadifyUpload()">开始上传</a>
<a href="javascript:jQuery('#file').uploadifyClearQueue()">取消所有上传</a>
</p>
<ol class=files></ol>
</td>
</tr>
</table>
</body>
</html>
package com.hw.msds.base.util;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.hw.msds.base.struts.BaseAction;
public class UploadAction extends BaseAction {
@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
// 省略文件上传代码
// ...
printResponseText(response, "上传成功");//向页面端返回结果信息
return null;
}
}