0
点赞
收藏
分享

微信扫一扫

Uploadify在Struts2中的应用


Uploadify在Struts2中的应用


步骤一: 到官网上下载uploadify的JS文件.
Uploadify在线演示:在线Demo

Uploadify配置参数及接口文档:http://www.uploadify.com/documentation

Uploadify插件下载地址:http://www.uploadify.com/download

--------------------------------------------------------------------
步骤二:下载好uploadify压缩包文件后,解压文件包。在文件夹中找到以下五个文件,并添加到项目的对应路径中:
jquery.uploadify.v2.1.0.js
swfobject.js
uploadify.swf
uploadify.css
cancel.png

步骤三:加入struts2的jar包、struts.xml ,在web.xml中加入struts2的FilterDispatcher过滤器。

----------------------------------------------------------------------------------------------------------------------------------

1、jsp代码:

<%@ 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>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<link href="css/default.css" rel="stylesheet" type="text/css" />

<link href="css/uploadify.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/swfobject.js"></script>

<script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#uploadify").uploadify({

'uploader' : 'uploadify.swf', //是组件自带的flash,用于打开选取本地文件的按钮

'script' : 'uploadAction!uploadFile.action',//处理上传的路径,这里使用Struts2是XXX.action

'cancelImg' : 'image/cancel.png',//取消上传文件的按钮图片,就是个叉叉

'folder' : 'uploads',//上传文件的目录

'fileDataName' : 'uploadify',//和input的name属性值保持一致就好,Struts2就能处理了

'queueID' : 'fileQueue',

'auto' : false,//是否选取文件后自动上传

'multi' : true,//是否支持多文件上传

'simUploadLimit' : 2,//每次最大上传文件数

'buttonText' : 'BROWSE',//按钮上的文字

'displayData' : 'speed',//有speed和percentage两种,一个显示速度,一个显示完成百分比

'fileDesc' : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性,那么这个属性是必须的

'fileExt' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式

'onComplete' : function (event, queueID, fileObj, response, data){

$("#result").html(response);//显示上传成功结果

setInterval("showResult()",2000);//两秒后删除显示的上传成功结果

}

});

});


function showResult(){//删除显示的上传成功结果

$("#result").html("");

}

function uploadFile(){//上传文件

jQuery('#uploadify').uploadifyUpload();

}

function clearFile(){(){//清空所有上传队列

jQuery('#uploadify').uploadifyClearQueue();

}

</script>


</head>


<body>

<div id="fileQueue"></div>

<input type="file" name="uploadify" id="uploadify" />

<p>

<a href="javascript:uploadFile()">开始上传</a>

<a href="javascript:clearFile()">取消所有上传</a>

</p>

<div id="result"></div><!--显示结果-->

</body>

</html>



----------------------------------------------------------------------------------------------------------------------------------

2、web.xml

<filter>

<filter-name>struts2</filter-name>

<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>

</filter>

<filter-mapping>

<filter-name>struts2</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>


----------------------------------------------------------------------------------------------------------------------------------

3、struts.xml

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">


<struts>


<package name="struts2" extends="struts-default">

<action name="uploadAction" class="com.lijigou.action.UploadAction" method="uploadFile">

</action>

</package>

</struts>



----------------------------------------------------------------------------------------------------------------------------------

4、action代码

package com.lijigou.action;


import java.io.File;

import java.text.SimpleDateFormat;

import java.util.Date;


import javax.servlet.http.HttpServletResponse;


import org.apache.struts2.ServletActionContext;


import com.opensymphony.xwork2.ActionSupport;


@SuppressWarnings("serial")

public class UploadAction extends ActionSupport {


private File uploadify;


private String uploadifyFileName;




@SuppressWarnings("deprecation")

public String uploadFile() throws Exception {



String extName = "";//扩展名


String newFileName= "";//新文件名


String nowTime = new SimpleDateFormat("yyyymmddHHmmss").format(new Date());//当前时间


String savePath = ServletActionContext.getRequest().getRealPath("");


savePath = savePath +"/uploads/";

HttpServletResponse response = ServletActionContext.getResponse();

response.setCharacterEncoding("utf-8");


//获取扩展名

if(uploadifyFileName.lastIndexOf(".")>=0){

extName = uploadifyFileName.substring(uploadifyFileName.lastIndexOf("."));

}

newFileName = nowTime+extName;


uploadify.renameTo(new File(savePath+newFileName));


response.getWriter().print(uploadifyFileName+"上传成功");


return “ok”; //这里输入什么字串都行。注意不能是nul,否则进度条不走完


}



public File getUploadify() {

return uploadify;

}



public void setUploadify(File uploadify) {

this.uploadify = uploadify;

}



public String getUploadifyFileName() {

return uploadifyFileName;

}



public void setUploadifyFileName(String uploadifyFileName) {

this.uploadifyFileName = uploadifyFileName;

}


}



此插件适合少量文件的上传。


举报

相关推荐

0 条评论