上传文件

上传文件在前端有两种方法

1.通过Form表单提交

2.使用jquery插件ajaxfileupload进行异步上传

1.通过Form表单提交

From表单

<form id="testForm" action="make/test.hd" method="post" enctype="multipart/form-data" target="ztFrame">
上传图片
<input type="file" id="warnRoute" name="warnRoute"></input>
<div class="warnBtn warnBtn_margin" id="saveBtn">保存</div>
</form>
<iframe name='ztFrame' id=ztFrame frameborder=no border=0 style='width:0px;height:0px'></iframe>

注1：此处Form表单属性target设置为ztFrame，接收返回结果。form的target属性值有：

_blank	在新窗口中打开。
_self	默认。在相同的框架中打开。
_parent	在父框架集中打开。
_top	在整个窗口中打开。
framename	在指定的框架中打开。

注2：若不采用jquery进行表单验证，则需要设置值onsubmit="return validate()"

jQuery进行表单验证和提交，并接收ztFrame的返回值

$("#saveBtn").click(function(){

//内容校验
if(!warnFormValidate()){
return false;
}

//先将预警图片保存至后台
$.utilsPlug.maskStart();
$("#warnMakeForm").submit();

//接收返回值
var interval = setInterval(function(){
var returnContent = $("#ztFrame").contents().find("font");
if(returnContent.length > 0){
if(returnContent.html() === "false"){
art.dialog({
title: '提示',
icon: 'warning',
zIndex : 2400,
content: "生成预览失败",
ok: function(){},
close : function(){
$.utilsPlug.maskEnd();
}
});

}else{
art.dialog({
title: '提示',
content: "生成预览成功",
zIndex : 2400,
icon: 'succeed',
ok: function(){},
close : function(){
$.utilsPlug.maskEnd();
}
});
}
clearInterval(interval);
}
}, 1000);
})

2.使用jquery插件ajaxfileupload进行异步上传

From表单

<form id="testForm" action="make/test.hd" method="post" >
上传图片
<input type="file" id="warnRoute" name="warnRoute"></input>
<div class="warnBtn warnBtn_margin" id="saveBtn">保存</div>
</form>

提交表单

//提交表单
$("#subBtn").die().live("click", function () {
$.ajaxFileUpload({
url: 'system/uploadWarnRoute.hd',
type: 'post',
secureuri: false, //一般设置为false
fileElementId: 'routImg', // file标签的id
dataType: 'text', //返回值类型，一般设置为json、application/json
data: {//一同上传的数据
id: $("#id").val(),
name: $("#name").val(),
descr: $("#descr").val(),
adminId: $("#adSel").attr("finalAdid")
},
success: function (data, status) {
refreshGrid();
art.dialog({
title: '提示',
lock: true,
content: '操作成功！',
button: [{
name: '确定',
callback: function () {}
}]
});
},
error: function (data, status, e) {
alert(e);
}
});
})

后台代码

@ResponseBody
@RequestMapping(value = "test.hd")
public void saveTempRouteImg(MultipartHttpServletRequest request, HttpServletResponse response) {
String imgPath = "false";
try {
request.setCharacterEncoding(SystemConstant.CHAR_ENCODING);
//获取图片
MultipartFile file = request.getFile("warnRoute");
imgPath = "upload/temp/route_" + System.currentTimeMillis() + ".jpg";

File imgFile = new File(SystemConstant.WEB_ROOT + imgPath);

//如果目录不存在，则创建
if (!imgFile.exists()) {
imgFile.mkdirs();
}
file.transferTo(imgFile);

//返回信息
PrintWriter pw = response.getWriter();
pw.write("<font>" + imgPath + "</font>");
pw.close();

} catch (Exception e) {
logger.error(e);
}
}

applicationContext.xml中需要配置：

<!--文件上传-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10000000"/>
</bean>