在QQ上有人问uploadify传递参数,就随便看了下,感觉挺漂亮的,正好做struts2项目就配置了一下。
项目用的是SSh框架
web.xml配置如下:这里配置了 spring struts2 以及log
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name>OMS</display-name> <context-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/classes/ApplicationContext.xml</param-value> </context-param> <jsp-config> <jsp-property-group> <url-pattern>*.jsp</url-pattern> <el-ignored>true</el-ignored> </jsp-property-group> </jsp-config> <!-- log4j configuration --> <context-param> <param-name>webAppRootKey</param-name> <param-value>oms.root</param-value> </context-param> <context-param> <param-name>log4jConfigLocation</param-name> <param-value>WEB-INF/classes/log4j.properties</param-value> </context-param> <context-param> <param-name>log4jRefreshInterval</param-name> <param-value>3000</param-value> </context-param> <listener> <listener-class> org.springframework.web.util.Log4jConfigListener </listener-class> </listener> <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter> <filter-name>struts-cleanup</filter-name> <filter-class> org.apache.struts2.dispatcher.ActionContextCleanUp </filter-class> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter-mapping> <filter-name>struts-cleanup</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <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> <listener> <listener-class> org.springframework.web.context.ContextLoaderListener </listener-class> </listener> <session-config> <session-timeout>180</session-timeout> </session-config> <!-- <welcome-file-list> <welcome-file>jsp/login.jsp</welcome-file> </welcome-file-list> --> </web-app>
因为没有用到spring的上传这里就只给struts的配置;
struts.xml
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <include file="struts-default.xml" /> <constant name="struts.devMode" value="false" /> <constant name="struts.enable.DynamicMethodInvocation" value="false" /> <constant name= "struts.multipart.maxSize" value="1073741824" /> <constant name="struts.action.extension" value="action,do,webwork" /> <package name="query" namespace="/" extends="struts-default"> <action name="uploadFile" class="com.aopu.action.FileUploadAction"> <result>/jsp/upload.jsp</result> </action> </package> </struts>
这里面有个常量配置是配置上传大小限制,默认2M
<constant name= "struts.multipart.maxSize" value="1073741824" />
后台上传实现类
package com.aopu.action; import java.io.File; import javax.servlet.ServletContext; import javax.servlet.http.HttpServletRequest; import org.apache.commons.io.FileUtils; import org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper; import org.apache.struts2.interceptor.ServletRequestAware; import org.apache.struts2.util.ServletContextAware; import com.opensymphony.xwork2.ActionSupport; public class FileUploadAction extends ActionSupport implements ServletContextAware, ServletRequestAware { private File doc; private String fileName; private String contentType; private ServletContext context; private HttpServletRequest request; public String execute() throws Exception { String targetDirectory = this.context.getRealPath("/upload"); String[] names = ((MultiPartRequestWrapper)this.request).getFileNames("doc"); File target = new File(targetDirectory, names[0]); FileUtils.copyFile(doc, target); return SUCCESS; } @Override public void setServletContext(ServletContext context) { this.context = context; } @Override public void setServletRequest(HttpServletRequest request) { this.request = request; } public File getDoc() { return doc; } public void setDoc(File doc) { this.doc = doc; } public String getFileName() { return fileName; } public void setFileName(String fileName) { this.fileName = fileName; } public String getContentType() { return contentType; } public void setContentType(String contentType) { this.contentType = contentType; } }
后台全部实现完成
前台jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <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> <title>Insert title here</title> </head> <script type="text/javascript"> $(document).ready(function() { $("#uploadify").uploadify({ 'uploader' : '../css/uploadify.swf', 'script' : 'uploadFile.action', 'fileDataName' : 'doc', 'cancelImg' : 'cancel.png', 'folder' : 'uploads', 'queueID' : 'fileQueue', 'onCheck' : function(event,checkScript,fileQueue,folder,single){ var aa =checkScript; alert(checkScript); return false; }, 'auto' : false, 'multi' : true }); }); function mycheck(event,checkScript,fileQueue,folder,single){ var aa =checkScript; alert(checkScript); } </script> </head> <body> <div id="fileQueue"></div> <input type="file" name="uploadify" id="uploadify" /> <p> <a href="javascript:$('#uploadify').uploadifyUpload();">Upload Files</a>|<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">Cancel All Uploads</a></p> </body>
这里需注意后台取得前台的内容是通过'fileDataName' 配置的,我起名是doc。
auto配置是否制动提交
multi配置是否允许多文件
附件是前台的js css 以及一些资源
资源:
http://www.uploadify.com/demo/