日期:2014-05-16  浏览次数:20685 次

jquery 插件ajaxfileupload与struts2结合 实现异步上传图片

?? ? ? 因为项目需要,想实现一个异步上传图片的功能。当然这时struts2自带的fileupload拦截器不能用了。

网上搜了下,基本都是用插件来实现了,我就随便选择了一个简单的插件-ajaxfileupload来实现、

?

先构架出struts2的框架就不说了,无非那5个常用的jar包导入而已。因为是jquery的插件,因此需要添加jquery库文件以及核心文件ajaxfileupload.js,下面附件中会有这个js文件。写一个相当简单的上传类:

?

package com.aokunsang.action;

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

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class FileUploadAction extends ActionSupport {

	private File file;
	private String fileFileContentType;
	private String fileFileName;
	
	public void upload() throws Exception{
		String message = "";
		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
		ServletActionContext.getResponse().setCharacterEncoding("utf-8");
		if(fileFileName.endsWith(".exe")){
			message = "不允许上传此类文件!";
		}else if(!file.exists()){
			message = "此文件不存在!";
		}else {
			FileInputStream fis = new FileInputStream(file);
			FileOutputStream fos = new FileOutputStream(new File("F://aa.jpg"));
			byte bt[] = new byte[500];
			while(fis.read(bt)>0){
				fos.write(bt);
			}
			fis.close();
			fos.flush();
			fos.close();
			message = "文件上传成功!";
		}
		ServletActionContext.getResponse().getWriter().write("{msg:\""+message+"\"}");
		ServletActionContext.getResponse().getWriter().flush();
		ServletActionContext.getResponse().getWriter().close();
	}

	setter和getter。。。。

?

?

?

<package namespace="/" name="root" extends="struts-default">
		<action name="fileUpload" class="com.aokunsang.action.FileUploadAction" method="upload">
		</action>
	</package>

?

这里大家可能注意到:我的action中的方法没有返回值,因为我用ServletActionContext.getResponse().getWriter().write()直接返回给jquery回调函数需要的参数,所以没用struts2

的必须返回值,当然你也可以有返回值none等。

?

重点解析:

?? 1、网上有说需要用struts-json.jar,我观察发现他们使用这个jar文件无非是想返回jquery的回调函数一个json字符串而已。因此我使用:ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");

?? 2、注意返回字符串的格式:必须是一个json格式的字符串,并且为"{msg:''}"这样类型。

?

----------------------------------------------------------

?

网上有很多人问,ajaxfileupload是否可以添加自定义参数支持,我的回答是:完全可以。只不过需要我们手动自己添加这样的支持,看了源代码,它也是封装了一个form表单,

咱们把需要的参数添加进去不就大功告成了嘛、说整就整、看代码:

。。。。上略
createUploadForm: function(id, fileElementId, data)
	{
		//create form	
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');	
		var oldElement = $('#' + fileElementId);
		var newElement = $(oldElement).clone();
		$(oldElement).attr('id', fileId);
		$(oldElement).before(newElement);
		$(oldElement).appendTo(form);
		//添加参数支持
		if(data){
			$.each(data,function(key,value){
				$("<input type='hidden' name='"+key+"' value='"+value+"'/>").appendTo(form);
			})
		}
		//set attributes
		$(form).css('position', 'absolute');
		$(form).css('top', '-1200px');
		$(form).css('left', '-1200px');
		$(form).appendTo('body');		
		return form;
    },
。。。。。。下略
?
ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout		
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()        
		var form = jQuery.createUploadForm(id, s.fileElementId,s.data);
		var io = jQuery.createUploadIframe(id,