Play FrameWork 使用jquery.form.js实现无刷新提交带文件的表单

页面HTML:

<form id="fileFrom" action="/stockpile/storeActivity/uploadPic" method="post" enctype="multipart/form-data">
<input type="hidden" id="participateOthers" name="picNmae" value="Kissfly" />
<input type="file" id="uploadImage" name="uploadImage" width="150px" onchange="PreviewImage(this)" />
<input type="submit" value="确认" id = "am-kill-shure" >
</form>

JS代码：

$(document).ready(function(){
var options = {
type:"POST",
dataType:"json",
beforeSerialize:function(){
alert("form序列化前执行的操作！");
},
beforeSubmit:function(){
alert("表单提交前执行的操作！");
},
success:function(json){//表单提交成功回调函数
alert("表单操作完成！操作结果："+json.msg);
},
error:function(err){
alert("表单提交异常！"+err.msg);
}
};
$("#fileFrom").ajaxForm(options);
});

导入js文件
<script src='@routes.Assets.at("javascripts/jquery.form.min.js")' type="text/javascript"></script>

后台处理：

public static Result uploadPic(){
String picName = Form.form().bindFromRequest().get("picNmae");
Logger.info("获取的图片名称为：" + picName);
MultipartFormData body = request().body().asMultipartFormData();
FilePart picture = body.getFile("uploadImage");
if (picture != null) {
String fileName = picture.getFilename();
Logger.info("上传的图片名称为： " + fileName);
String contentType = picture.getContentType();
Logger.info("上传的图片类型为： " + contentType);
File file = picture.getFile();
String url = "";
//图片保存的路径
String picUrl = "";
Logger.info("filePath.."+file.getAbsolutePath());
if ((url = uploadImg(picture, "stockpile/images/good", "g")) != null) {
picUrl = ImageUtil.aliImage(url);
Logger.info("图片保存的路径为： "+picUrl);
}
} else {
flash("error", "Missing file");
}
ObjectNode on = Json.newObject();
on.put("msg", "成功");
return ok(on.toString());

}