之前写的一个项目,里面用了异步上传图片的功能。
经过百度后,选择一个常见插件ajaxfileupload.js来实现。
public String ajaxUploadOdAtt(){
//从session中读取当前登录用户的信息
ActionContext context = ActionContext.getContext();
adminInfo = (AdminInfo) context.getSession().get("LOGINADMIN");
String path="";
String newFileName = "";
int count = 0;
// 用一个Map做返回
Map<String, String> map = new HashMap<String, String>();
//如果没有文件需要上传
if(ajaxUpload==null){
map.put("result", "未选择文件");
// 将要返回的map对象进行json处理
JSONObject jo = JSONObject.fromObject(map);
// 调用json对象的toString方法转换为字符串然后赋值给result
this.message = jo.toString();
return "success";
}
try {
// System.out.println("创建目录开始");
Date date = new Date();
SimpleDateFormat sdf1 = new SimpleDateFormat("yyyyMMddHHmmss");
SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd");
path = "D:\\ODMupload\\OdAtts\\"+sdf2.format(date);
// 写到指定的路径中
File file = new File(path);
// 如果指定的路径没有就创建
if (!file.exists()) {
file.mkdirs();
}
//对文件重命名
newFileName = sdf1.format(date)+ajaxUploadFileName;
//把文件copy到指定目录
FileUtils.copyFile(ajaxUpload, new File(file, newFileName));
System.out.println("成功上传文件:"+path+"\\"+newFileName+",文件大小:"+(double)(ajaxUpload.length()/1024)+"K");
String suffix = "";//获取文件后缀名
suffix = ajaxUploadFileName.substring(ajaxUploadFileName.lastIndexOf(".")+1);
suffix = suffix.toLowerCase();
odAtt.setOdAttFilename(ajaxUploadFileName);
odAtt.setOdAttRemark(newFileName);
odAtt.setOdAttPath(path);
odAtt.setOdAttSuffix(suffix);
//把附件记录存放到数据库中
getOdAttService().addOdAtt(odAtt);
} catch (Exception e) {
e.printStackTrace();
}
map.put("result", "成功");
map.put("name", ajaxUploadFileName);
map.put("attid", odAtt.getOdAttId().toString());
// 将要返回的map对象进行json处理
JSONObject jo = JSONObject.fromObject(map);
// 调用json对象的toString方法转换为字符串然后赋值给result
this.message = jo.toString();
return "success";
}
在struts.xml中配置参数:
<action name="ajaxUploadOdAtt" class="ODManageAction" method="ajaxUploadOdAtt">
<result name="success" type="json">
<param name="root">message</param>
<param name="contentType">text/html;charset=UTF-8</param>
</result>
</action>
完成后,在前台通过struts标签和Jquery的ajax功能实现调用即可。
<a href="javascript:void(0);" class="a-upload">
<s:file label="上传文件" id="upload1" name="ajaxUpload" cssClass="ajaxupload1" onChange="ajaxUpload2(this);"></s:file>
点击上传文件</a>
//ajax上传文件,通过ajaxfileupload插件实现
function ajaxUpload2(btn){
//$("#loading").show();
var $btn = $(btn);
var oldHtml = $("#"+btn.className).html();
var randomId = Math.floor(Math.random()*999+1);
$("#"+btn.className).text("正在上传文件");
$("#"+btn.className).after("<img id='"+randomId+"' src='../images/loading.gif' height='30px' width='30px'/>");
$.ajaxFileUpload({
url: 'ajaxUploadOdAtt.action',
type: 'post',
secureuri: false, //一般设置为false
fileElementId: btn.id, // 上传文件的id、name属性名
dataType: 'json', //返回值类型,一般设置为json、application/json
data: {'ajaxUploadRelated':btn.className},
success: function(data, status){
//data = jQuery.parseJSON(jQuery(data).text());
data = jQuery.parseJSON(data);
setTimeout(function () {
$("#"+randomId).remove();
if(data.result == "成功"){
$("#"+btn.className).html("已上传:<a href='download.action?odAtt.odAttId="+data.attid+"'>"+data.name+"</a>");
$("#"+btn.className).attr("class",data.attid) ;
//alert($("#"+btn.className).attr("class"));
//alert($("#"+btn.className).attr("name"));
}else if(data.result == "失败"){
$("#"+btn.className).html("上传失败--"+data.reason);
}else if(data.result == "未选择文件"){
$("#"+btn.className).html(oldHtml);
}else{
$("#"+btn.className).html("上传失败--原因未知");
}
}, 1000);
},
error: function(data, status, e){
$("#"+randomId).remove();
$("#"+btn.className).html("上传失败--未知错误");
}
});
}