步骤一: 到官网上下载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 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; } }
以上代码都通过测试,没有问题的。