struts2 ajax图片上传

1.前端jsp文件如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="js/ajaxfileupload.js"></script>
	<script type="text/javascript" language="javascript"></script>
</head>
<body>
<div>
	<div style="text-align:center;">
		<img src="img/loading.gif" id="loading" style="width:200px;height:200px;">
	</div>
	<div style="text-align:center;">
		<input type="file" name="file" id="file" multiple/>
		<input type="button" value="上传" id="button"/>
	</div>
</div>
</body>
<script>
$(function() {
    
	$("#file").change(function() {
		var fileObj = $(this)[0];
	        var windowURL = window.URL || window.webkitURL;
	        var dataURL;
	        if(fileObj && fileObj.files && fileObj.files[0]) {
	            dataURL = windowURL.createObjectURL(fileObj.files[0]);
	            $("#loading").attr("src", dataURL);
	        }
	})
	$("#button").click(function() {
		if($("#file").val().length > 0) {
			$.ajaxFileUpload({
				url:"fileUpload",
				secureuri: false, //一般设置为false
				fileElementId: 'file', //文件上传空间的id属性
				dataType: 'json',
				success: function (data, status)  //服务器成功响应处理函数
				{
					alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
				},
				error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
			})
		}
	})
})
</script>
</html>

2.struts2配置文件：

<?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>

	<constant name="struts.custom.i18n.resources" value="message"></constant>
	
	<package name="default" namespace="/" extends="json-default"> 
	
        <action name="jsontest" class="Struts2.json.test.action.JQueryJsonStruts2Action"> 
        
            <!-- 返回单个值的result --> 
            <result name="message" type="json"></result> 
            <!-- 返回UserInfo对象的--> 
            <result name="userInfo" type="json"></result> 
            <!-- 返回List对象的--> 
            <result name="list" type="json"></result> 
            <!-- 返回Map对象的--> 
            <result name="map" type="json"></result>
            <!-- 返回JSON格式的字符串的单个值> --> 
            <result type="json"></result>
            <!-- 异常处理 -->
            <result name="error" type="json">/error.jsp</result>
        </action> 
        
        <action name="fileUpload" class="Struts2.json.test.action.FileUploadAction"> 
			<result type="json" name="success">
                <param name="contentType">
                    text/html
                </param>
            </result>
            <result type="json" name="error">
                <param name="contentType">
                    text/html
                </param>
            </result>
        </action> 

    </package>

</struts>

3.Action文件：

package Struts2.json.test.action;
import java.io.File;
import com.opensymphony.xwork2.ActionSupport;

public class FileUploadAction extends ActionSupport{
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
    private File file;
    private String fileFileName;
    private String fileContentType;
	private String url;


	public String getFileFileName() {
		return fileFileName;
	}

	public void setFileFileName(String fileFileName) {
		this.fileFileName = fileFileName;
	}

	public String getFileContentType() {
		return fileContentType;
	}

	public void setFileContentType(String fileContentType) {
		this.fileContentType = fileContentType;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	private String json;
	private String message = "你已成功上传文件";
	public File getFile() {
		return file;
	}

	public void setFile(File file) {
		this.file = file;
	}

	public String getJson() {
		return json;
	}

	public void setJson(String json) {
		this.json = json;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}
	
    @Override
	public String execute() {
		File file = this.getFile();
		System.out.println(fileFileName+ " : " + fileContentType);
		url = file.getPath();
		json="{url:'"  + url + "'}";
		return SUCCESS;
	}
}

4.执行画面如图：

struts2 ajax图片上传

猜你喜欢