文件上传插件Uploadify+Struts2 浅谈
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /><meta http-equiv="x-ua-compatible" content="ie=7" />
<link href="../../css/example/css/default.css" rel="stylesheet" type="text/css" />
<link href="../../css/example/css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="../../script/jquery-1.3.2.min.js" charset="GBK"></script>
<script type="text/javascript" language="javascript" src="../../script/swfobject.js"></script>
<script type="text/javascript" language="javascript" src="../../script/jquery.uploadify.v2.1.4.js"></script>
<script type="text/javascript" language="javascript" src="../../script/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#uploadify").uploadify({
'uploader': '../../script/uploadify.swf',
'script': 'phT_test.do',
'cancelImg': '../../script/cancel.png',
'folder': 'photo',
'queueID': 'fileQueue',
'clieid':'clieid',
'auto': false,
'multi': true,
'fileExt':'*.jpg;*.jpeg;*.gif;*.png;*.bmp;',
'fileDesc':'选择*.jpg;*.jpeg;*.gif;*.png;*.bmp;',
'sizeLimit':'4000000',
'buttonText':'up',
'wmode':'transparent',
'removeCompleted' : false,
'fileDataName' : 'fileInput', //file的name,
'onSelect': function(e, queueId, fileObj){
alert("唯一标识:" + queueId + "\r\n" +
"文件名：" + fileObj.name + "\r\n" +
"文件大小：" + fileObj.size + "\r\n" +
"创建时间：" + fileObj.creationDate + "\r\n" +
"最后修改时间：" + fileObj.modificationDate + "\r\n" +
"文件类型：" + fileObj.type
);
},
'onComplete': function (event, queueID, fileObj, response, data) {
alert(fileObj.filePath);
$('#address').appendTo('.files').text(response);
},
'onError': function(event, queueID, fileObj) {
alert("文件:" + fileObj.name + "上传失败");
}
});
});
</script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'uploader': '../../script/uploadify.swf',
'script': 'phT_test.do', // 后台action 为 .do 请求
'cancelImg': '../../script/cancel.png',
'folder': 'photo',
'auto': false,
'multi': false,
'fileExt':'*.jpg;*.jpeg;*.gif;*.png;*.bmp;',
'fileDesc':'选择*.jpg;*.jpeg;*.gif;*.png;*.bmp;',
'sizeLimit':'4000000',
'buttonText':'File',
'wmode':'transparent',
'removeCompleted' : false,
'fileDataName' : 'fileInput', //file的name,
'onComplete': function (event, queueID, fileObj, response, data) {
$("#address").val(fileObj.filePath); // 这里是返回图片地址 的一个属性。保存到表中
},
'onError': function(event, queueID, fileObj) {
alert("文件:" + fileObj.name + "上传失败");
},
'onCancel': function(event, queueID, fileObj){
alert("取消" + fileObj.name);
}
});
});
</script>
<body>
<html>
单个文件上传
<div class="demo-box">
<input id="file_upload" type="file" name="fileInput" />
<p><a href="javascript:$('#file_upload').uploadifyUpload()">上传</a></p>
</div>
<input value="${address }" name="address" id="address" type="text"/>
多个文件上传
<div id="fileQueue" class="fileQueue"></div>
<input type="file" name="fileInput" id="uploadify" />
<p><a href="javascript:$('#uploadify').uploadifyUpload()">上传</a></p>
</body>
</html>
默认的CSS 文件加入 以下CSS样式（官网demo 中的基本样式）
#basic-demo .uploadifyQueueItem {
background-color: #F5F5F5;
border: 2px solid #E5E5E5;
font: 11px Verdana, Geneva, sans-serif;
margin-top: 5px;
padding: 10px;
width: 350px;
}
#basic-demo .uploadifyError {
background-color: #FDE5DD !important;
border: 2px solid #FBCBBC !important;
}
#basic-demo .uploadifyQueueItem .cancel {
float: right;
}
#basic-demo .uploadifyQueue .completed {
background-color: #E5E5E5;
}
#basic-demo .uploadifyProgress {
background-color: #E5E5E5;
margin-top: 10px;
width: 100%;
}
#basic-demo .uploadifyProgressBar {
background-color: #0099FF;
height: 3px;
width: 1px;
后台action
public class PhotoAction extends ActionBaseWach{
private File fileInput;
private String fileInputFileName;
private String fileInputContentType;
private String folder;
//set .get 略....
public String textajax(){
return "textajax";
}
public String test() {
ctx = ActionContext.getContext();
HttpServletResponse sd = ServletActionContext.getResponse();
sd.setContentType("GBK");
String path=ServletActionContext.getServletContext().getRealPath("/");
File fd=new File(path+folder); //floder就是js中配置的floder,这里要提供个String属性的floder,病get,set
if(!fd.exists()){
fd.mkdir();
}
try {
FileUtils.copyFile(fileInput, new File(fd ,fileInputFileName));
sd.getWriter().print(fileInputFileName+"上传成功");
} catch (IOException e) {
e.printStackTrace();
}
return null; //这里不需要页面转向，所以返回空就可以了
}