当前位置: 代码迷 >> Web前端 >> struts2下传文件与uploadify插件的应用
  详细解决方案

struts2下传文件与uploadify插件的应用

热度:66   发布时间:2012-11-06 14:07:00.0
struts2上传文件与uploadify插件的应用
在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/
  相关解决方案