uploadify 3.2结合struts2的使用详解

最新推荐文章于 2018-04-18 10:05:38 发布

云原生之家

最新推荐文章于 2018-04-18 10:05:38 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xtayfjpk/article/details/9138471

struts2 同时被 3 个专栏收录

30 篇文章

订阅专栏

javascript

6 篇文章

订阅专栏

ajax

2 篇文章

订阅专栏

本文详细介绍了如何将uploadify 3.2与Struts2框架结合使用进行文件上传。重点讲解了JSP页面中的关键参数设置，如swf、uploader、queueID和fileObjName，并指出fileObjName与<input> name属性值不必相同。还澄清了关于cancelImage属性的误解。在Struts2 Action中展示了文件上传的处理代码，并提到在上传成功后，通过onUploadSuccess事件处理返回的JSON数据，需要使用$.parseJSON()进行转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说一下uploadify3已经没有swfobject.js这个文件了，已经嵌在了jquery.uploadify.js中，使用uploadify只需要其中的4个文件，分别是：

uploadify-cancel.png、uploadify.swf、uploadify.css、jquery.uploadify.js或者jquery.uploadify.min.js。其中jquery.uploadify.js与jquery.uploadify.min.js其实就是同一个文件，只不过jquery.uploadify.min.js去掉了换行空格等使文件变小了不便于阅读而已，其功能与jquery.uploadify.js是一样的。

JSP页面：

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
      <head>
        <title>UploadifyTest</title>
        <link href="/bbs/js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="/bbs/js/base/jquery.js"></script>
        <script type="text/javascript" src="/bbs/js/uploadify/jquery.uploadify.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#portrait').uploadify({
                'swf'       : '/bbs/js/uploadify/uploadify.swf',
                'uploader'         : '/bbs/uploadifyTest.do',
                'queueID'        : 'fileQueue',
                'auto'           : false,
                'multi'          : true,
                'buttonText'     : '上传头像',
                'fileSizeLimit' : '1MB',
                'fileObjName' : 'portrait',
                'method' : 'post'
            });
        });
        </script>
    </head>
    <body>
        <div id="fileQueue"></div>
        <input type="file" name="xxx" id="portrait" />
        <p>
        <a href="javascript:jQuery('#portrait').uploadify('upload','*')">开始上传</a> 
        <a href="javascript:jQuery('#portrait').uploadify('cancel')">取消所有上传</a>
        </p>
    </body>
</html>

这里解释一下，为了测试方便，本人直接把上下文路径(/bbs)硬编码了，实际当中应该动态指定。

说一下其中重要的参数：swf是flash文件所在地址，因为uploadify是基于flash实现文件上传的，uploader是文件上传提交的服务器地址，queueID是<div id="fileQueue"></div>的id属性值，上传时显示出的UI就是放在这个div中，fileObjName是服务器端用于接收文件的key，我看到有些人说<input>的name属性值必须与fileObjName属性值相同，但经测试是可以不相同的，只要服务器端用fileObjName去接收文件就行了，还有些人写一个cancelImage属性，在3这个版本中根本就没有这个属性，去看uploadify的官方文档就知道了，在options中根本找不到这个属性.cancelImage指的就是上传时出现的取消上传的图片，在3版本中是在uploadify.css中指定的，源代码为：

.uploadify-queue-item .cancel a {
	background: url('../img/uploadify-cancel.png') 0 0 no-repeat;
	float: right;
	height:	16px;
	text-indent: -9999px;
	width: 16px;
}

如果需要修改，只要把背景的url修改就行了，其它的参数参看一下uploadfiy的文档应该都能看懂就不再多说了。

文档地址：uploadify文档

struts2 Action代码：

package com.xtayfjpk.bbs.test;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;

import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.opensymphony.xwork2.ActionSupport;

@Controller("uploadifyTestAction")
@Scope("prototype")
public class UploadifyTestAction extends ActionSupport {
	private static final long serialVersionUID = 837481714629791752L;
	private File portrait;
	private String portraitContentType;
	private String portraitFileName;
	
	public File getPortrait() {
		return portrait;
	}
	public void setPortrait(File portrait) {
		this.portrait = portrait;
	}
	public String getPortraitContentType() {
		return portraitContentType;
	}
	public void setPortraitContentType(String portraitContentType) {
		this.portraitContentType = portraitContentType;
	}
	public String getPortraitFileName() {
		return portraitFileName;
	}
	public void setPortraitFileName(String portraitFileName) {
		this.portraitFileName = portraitFileName;
	}

	
	public void doUpload() throws Exception {
		//doSomething
	}
}

值得注意的是Action中定义的File属性名必须与uploadify属性中的fileObjName属性值相同，否则就接收不到上传的文件了。

Action配置：

<package name="base" namespace="/" extends="struts-default">
    	<action name="uploadifyTest" class="uploadifyTestAction" method="doUpload"/>
</package>

这样应该就能上传成功啦

我们经常会在上传成功后给用户一点提示，这就需要要捕获onUploadSuccess事件，提示信息一般是在服务器端回返的，这时选用JSON数据格式是个很好的选择，但onUploadSuccess参数data并不是一个JSON对象，而是一个JSON格式的字符串，这时需要使用$.parseJSON(json)方法进行转换一个就可以使用了。