Struts2学习（四）利用ajax异步上传
上一篇说到如何在struts2中进行上传下载，我们使用了struts的标签通过表单提交的方式，但大家知道表单提交会造成页面整体的刷新，这种方式非常不友好，那我们今天就来说说如何结合ajax方式进行异步上传。
此例中需要的文件可以点击这里下载：struts2异步所需文件
文件说明：
ajaxfileupload.js : jquery不支持上传，所以使用这个ajax插件，和 jquery 中的ajax用法差不多，从下面代码可以看到。
json2.js : 对ajax中的回调参数进行json封装，以此获得参数值。因为struts2返回的json中有网页标签就像这样：
，所以我们text方式返回，再通过此插件拿到参数
struts2-json-plugin-2.3.15.1 ： 使用json,需要添加这个jar包
代码如下：
struts.xml
<struts>
<constant name="struts.devMode" value="true" />
<package name="up" extends="json-default">
<default-action-ref name="index">default-action-ref>
<action name="index">
<result>/index.jspresult>
action>
<action name="upload" class="com.etoak.action.UploadAction">
<result name="success" type="json">
<param name="contentType">text/plainparam>
result>
action>
<action name="delFile" class="com.etoak.action.DelFileAction">
<result type="json">result>
action>
package>
struts>
UploadAction:
注意：我们使用struts中json方式返回后，所有写了get方法的属性都会被封装到json中，返回到前台，所以不需要返回的属性可以把get方法注释掉。
package com.etoak.action;
import java.io.File;
import java.util.List;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.omg.CORBA.PUBLIC_MEMBER;
import com.etoak.util.UUIDGenerator;
import com.opensymphony.xwork2.ActionSupport;
public class UploadAction extends ActionSupport {
private File myfile;
private String myfileFileName;
// 重新命名后的文件全名
private String newFileName;
/*
* public File getMyFile() { return myFile; }
*/
public void setMyfile(File myfile) {
this.myfile = myfile;
}
/*
* public String getMyfileFileName() { return myfileFileName; }
*/
public void setMyfileFileName(String myfileFileName) {
this.myfileFileName = myfileFileName;
}
public String getNewFileName() {
return newFileName;
}
/*
* public void setNewFileName(String newFileName) { this.newFileName =
* newFileName; }
*/
@Override
public String execute() throws Exception {
newFileName = new UUIDGenerator().generate()
+ myfileFileName.substring(myfileFileName.lastIndexOf("."));
String path = ServletActionContext.getServletContext().getRealPath(
"/image")
+ "/" + newFileName;
// newFileName自带getter方法，所以会添加到json中，返回前台
File destFile = new File(path);
// System.out.println(path);
FileUtils.copyFile(myfile, destFile);
return this.SUCCESS;
}
}
DelFileAction:
package com.etoak.action;
import java.io.File;
import java.util.List;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.omg.CORBA.PUBLIC_MEMBER;
import com.etoak.util.UUIDGenerator;
import com.opensymphony.xwork2.ActionSupport;
public class UploadAction extends ActionSupport {
private File myfile;
private String myfileFileName;
// 重新命名后的文件全名
private String newFileName;
/*
* public File getMyFile() { return myFile; }
*/
public void setMyfile(File myfile) {
this.myfile = myfile;
}
/*
* public String getMyfileFileName() { return myfileFileName; }
*/
public void setMyfileFileName(String myfileFileName) {
this.myfileFileName = myfileFileName;
}
public String getNewFileName() {
return newFileName;
}
/*
* public void setNewFileName(String newFileName) { this.newFileName =
* newFileName; }
*/
@Override
public String execute() throws Exception {
newFileName = new UUIDGenerator().generate()
+ myfileFileName.substring(myfileFileName.lastIndexOf("."));
String path = ServletActionContext.getServletContext().getRealPath(
"/image")
+ "/" + newFileName;
// newFileName自带getter方法，所以会添加到json中，返回前台
File destFile = new File(path);
// System.out.println(path);
FileUtils.copyFile(myfile, destFile);
return this.SUCCESS;
}
}
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>jquery异步上传title>
head>
<body>
<input type="file" name="myfile" id="myfile" />
<input type="button" value="上传" id="upload" />
<div id="files" >div>
<script type="text/javascript" src="script/jquery-1.10.2.js">script>
<script type="text/javascript" src="script/json2.js">script>
<script type="text/javascript" src="script/ajaxfileupload.js">script>
<script type="text/javascript">
$(document).ready(function(){
//上传文件，点击上传后
$("#upload").click(function(){
var $myfile = $("#myfile").val();
//检查用户是否上传了文件
if($myfile!=""){
//开始调用ajax异步请求
//此方法由ajaxfileupload.js提供
$.ajaxFileUpload({
url:"upload.action",
type:"post",
//提交上传文件的控件
fileElementId:"myfile",
//是否支持跨域传输
//默认不支持
secureuri:false,
//由于不能直接解析json，所以必须按照字符串
dataType:"text",
success:function(data){
alert(data);
//将json数据从标签中取出
var text = $(data).html();
//转换为js对象
var obj = JSON.parse(text);
//获得文件信息
var filename = obj.newFileName;
$("#files").append("![](image/"</span>+filename+<span class="hljs-string">")
");
//解除img元素上所有绑定的事件
$("img").unbind();
$("img").click(function(){
//拿取图片name属性
var fn = $(this).attr("name");
if(confirm("确定删除？")){
$.ajax({
url:"delFile.action",
type:"post",
data:"filename="+fn,
dataType:"json",
success:function(data){
if(data.flag){
alert("删除成功");
//拿到32位随机码
var uuid = fn.substring(0,fn.indexOf("."));
//拿取img元素name属性开头符合uuid的元素
$("img[name^="+uuid+"]").remove();
}
}
});
}
});
},
error:function(err){
alert(err.status);
}
});
}
});
});
script>
body>
html>
页面效果如下：
