文件上传插件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" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/script/jquery-1.3.2.min.js" charset="GBK"></script>
???? <script type="text/javascript" language="javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/script/swfobject.js"></script>
<script type="text/javascript" language="javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/script/jquery.uploadify.v2.1.4.js"></script>
<script type="text/javascript" language="javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/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 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"? 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; //这里不需要页面转向，所以返回空就可以了
??? ??? ?}