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" 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 null; //这里不需要页面转向,所以返回空就可以了
?}
?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;
?}
}
以上代码都通过测试,没有问题的。
?
1 楼 seraphice 2011-03-22 想请问一下我打开想上传的文件后,出现http::500错误。调试发现没有调用UploadAction。不知楼主是否遇到过?