jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码


Posted in Javascript onJune 04, 2013

(jsp需要引入 :jquery-1.9.0.js、jquery.form.js ) ,jsp页面使用的是bootstrap制作的,看不懂的标签不用管,form表单大同小异。代码比较简陋,只是为了演示使用ajaxSubmit异步上传图片及保存数据,请海含!
(参考文献:https://3water.com/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html)
一:web (add.jsp)

<%@page import="com.fingerknow.project.vo.UserInformation"%> 
<%@ page language="java" contentType="text/html; charset=utf-8" 
pageEncoding="utf-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<c:set var="ctx" value="${pageContext.request.contextPath }" /> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>注册商圈</title> 
<link href="${ctx}/bootstrap/css/bootstrap.css" rel="stylesheet"> 
<link href="${ctx}/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
<link rel="stylesheet" href="${ctx}/css/bootstrap-responsive.min.css" /> 
<link rel="stylesheet" href="${ctx}/css/jquery-ui.css" /> 
<link rel="stylesheet" href="${ctx}/css/uniform.css" /> 
<link rel="stylesheet" href="${ctx}/css/select2.css" /> 
<link rel="stylesheet" href="${ctx}/css/unicorn.main.css" /> 
<link rel="stylesheet" href="${ctx}/css/common.css" /> 
<% 
response.setCharacterEncoding("utf-8");//这个是设置编码方式 
response.setContentType("text/html");//这个是设置网页类型,为文本代码 
UserInformation user=null; 
String username=""; 
Integer userId=null; 
if(request.getSession().getAttribute("userinfo")!=null){ 
user=(UserInformation)request.getSession().getAttribute("userinfo"); 
username=user.getUsername(); 
userId=user.getUserId(); 
}else{ 
username="请<a href='http://localhost:8080/fk/test/login.jsp'>登录</a>"; 
} 
%> 
</head> 
<body> 
<div class="header-inner"> 
<div class="container"> 
<div class="row"> 
<div class=" page-header clearfix"> 
<div class="span11"> <h1 class="page-header" style="background:black;"><img alt="fingerknow" src="${ctx}/images/fingerknow.png" width=""><small>中文最大的购物经验分享平台</small></h1> </div> 
<div class="span1"> <a href="#">首页</a> |<a href="#">帮助</a></div> 
</div> 
</div> 
</div> 
</div> 
<div class="container" id="businessEname_div"> 
<div class="row"> 
<div class="span1"></div> 
<div class="span10"> 
<div class="widget-box"> 
<div class="widget-title"> 
<span class="icon"> 
<i class="icon-align-justify"></i> 
</span> 
<h5>注册商圈</h5> 
</div> <div class="widget-content nopadding"> 
<form class="form-horizontal" method="post" action="${ctx}/upload/upload.do" id="uploadImgForm" enctype="multipart/form-data"> 
<div class="control-group" style="border: 0px solid red;"> 
<label class="control-label">*商圈名:</label> 
<div class="controls" style="width: 350px;border: 0px solid red;vertical-align: middle;" > 
<input type="text" name="businessName" maxlength="20" id="businessName" width="200px;"/> 
<input type="text" name="userId" maxlength="20" value="<%=userId%>" id="userId" width="200px;"/> 
<div id="businessName_error" ></div> 
</div> 
</div> 
<div class="control-group"> 
<label class="control-label">*商圈logo:</label> 
<div class="controls" style="width:350px;"> 
<input type="file" name="file" id="file"> 
<div id="file_error"></div> 
</div> 
</div> 
<div class="control-group"> 
<label class="control-label">*商圈英文名:</label> 
<div class="controls" style="width: 350px;"> 
<input type="text" name="businessEname" id="businessEname" /> 
<div id="businessEname_error"></div> 
</div> 
</div> 
<div class="form-actions"> 
<button type="button" id="imgSave" value="Validate" class="btn btn-primary">提交注册</button> 
</div> 
</form> 
</div> 
</div> 
</div> 
<div class="span1"></div> 
</div> 
</div> 
<div class="container" style="background:white;"> 
<div class="row"> 
<div class="span12" style="margin-left: 25%;"> 
<p>© 2012 fingerknow.com <span>|</span><a href="#" rel="nofollow" >隐私条款</a><span>|</span><a href="#" rel="nofollow">服务条款</a><span>|</span><a href="#" rel="nofollow" >粤ICP备12003619号-1</a></p> 
</div> 
</div> 
</div> 
<script src="${ctx}/js/jquery-1.9.0.js"></script> 
<script src="${ctx}/js/jquery.form.js"></script> 
<script type="text/javascript"> 
/** 
* 
* V1.0 
*/ 
$(document).ready(function() { 
//验证商圈名 
$("#businessName").blur(function(){ 
var businessName=$("#businessName").val(); 
if(businessName!=""){ 
$("#businessName_error").html("<img src='${ctx}/images/success_img.gif' style='width:15px;height:15px;'/>"); 
}else{ 
$("#businessName_error").attr("class","error_div").html("<img src='${ctx}/images/error_img2.gif' style='width:15px;height:15px;'/>"+"商圈名不能为空!"); 
} 
}); 
//验证商圈英文名 
$("#businessEname").blur(function(){ 
var businessEname=$("#businessEname").val(); 
if(businessEname!=""){ 
$("#businessEname_error").html("<img src='${ctx}/images/success_img.gif' style='width:15px;height:15px;'/>"); 
}else{ 
$("#businessEname_error").attr("class","error_div").html("<img src='${ctx}/images/error_img2.gif' style='width:15px;height:15px;'/>"+"商圈英文名不能为空!"); 
} 
}); 
//图片上传 及数据保存 
$("#imgSave").click(function(){ 
var ext = '.jpg.jpeg.gif.bmp.png.'; 
var f=$("#file").val(); 
if (f== "") {//先判断是否已选择了文件 
$("#file_error").attr("class","error_div").html("<img src='${ctx}/images/error_img2.gif' style='width:15px;height:15px;'/>"+"请添加商圈logo!"); 
return false; 
} 
f = f.substr(f.lastIndexOf('.') + 1).toLowerCase(); 
if (ext.indexOf('.' + f + '.') == -1) { 
$("#file_error").attr("class","error_div").html("<img src='${ctx}/images/error_img2.gif' style='width:15px;height:15px;'/>"+"图片格式不正确!"); 
return false; 
} 
var options = { 
url: "${ctx}/upload/upload.do", 
dataType: 'json', 
contentType: "application/json; charset=utf-8", 
success: function(data) { 
// 'data' is an object representing the the evaluated json data 
// 如果图片上传成功则保存表单注册数据 
if(data.status=="0"){ 
var fileName=data.fileName; 
//alert(fileName); 
var businessName=$("#businessName").val(); 
var userId=$("#userId").val(); 
var businessEname=$("#businessEname").val(); 
businessName=encodeURI(businessName); 
businessName=encodeURI(businessName); 
var urls="${ctx}/business/addBusiness.do?businessName="+businessName+"&businessPic="+fileName+"&businessEname="+businessEname+"&userId="+userId; 
$.ajax({ 
type: "post", 
url:urls , 
dataType: "json", /*这句可用可不用,没有影响*/ 
contentType: "application/json; charset=utf-8", 
success: function (data) { 
if(data.status=="0"){ 
alert("注册成功!"); 
}else{ 
alert("注册失败!原因是:"+data.message); 
} 
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
alert(errorThrown); 
} 
}); 
}else{ 
$("#file_error").attr("class","error_div").html("<img src='${ctx}/images/error_img2.gif' style='width:15px;height:15px;'/>"+data.message); 
} 
} 
}; 
// 提交表单 
$('#uploadImgForm').ajaxSubmit(options); 
}); 
}); 
</script> 
</body> 
</html>

二:service(FileUploadController.java ----springMVC 之controller层)
@Controller 
@RequestMapping(value = "/upload") 
public class FileUploadController { 
private Logger logger; 
@RequestMapping(value = "upload.do", method = RequestMethod.POST) 
public void fileUpload(HttpServletRequest request, HttpServletResponse response) { 
Map<String, Object> resultMap = new HashMap<String, Object>(); 
String newRealFileName = null; 
try { 
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; 
CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file"); 
// 获得文件名: 
String realFileName = file.getOriginalFilename(); 
if(file.getSize()/1024>=5*1024){ 
resultMap.put("status", 1); 
resultMap.put("message", "图片不能大于5M"); 
}else{ 
System.out.println("获得文件名:" + realFileName); 
newRealFileName = FileUploadController.getNowTime() + realFileName.substring(realFileName.indexOf(".")); 
// 获取路径 
String ctxPath = request.getSession().getServletContext().getRealPath("//") + "//temp//"; 
// 创建文件 
File dirPath = new File(ctxPath); 
if (!dirPath.exists()) { 
dirPath.mkdir(); 
} 
File uploadFile = new File(ctxPath + newRealFileName); 
FileCopyUtils.copy(file.getBytes(), uploadFile); 
request.setAttribute("files", loadFiles(request)); 
resultMap.put("status", 0); 
resultMap.put("fileName", newRealFileName); 
} 
} catch (Exception e) { 
resultMap.put("status", 1); 
resultMap.put("message", "图片上传出错"); 
logger.info("***** 图片上传出错 *****"); 
System.out.println(e); 
} finally { 
PrintWriter out = null; 
try { 
out = response.getWriter(); 
} catch (IOException e) { 
e.printStackTrace(); 
} 
//必须设置字符编码,否则返回json会乱码 
response.setContentType("text/html;charset=UTF-8"); 
out.write(JSONSerializer.toJSON(resultMap).toString()); 
out.flush(); 
out.close(); 
} 
} 
}
Javascript 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
利用js对象弹出一个层
Mar 26 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
jquery 手势密码插件
Mar 17 Javascript
JS正则表达式验证中文字符
May 08 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 #Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 #Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 #Javascript
js判断undefined变量类型使用typeof
Jun 03 #Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 #Javascript
js+css实现增加表单可用性之提示文字
Jun 03 #Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 #Javascript
You might like
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php生成文件
2007/01/15 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
python修改字典内key对应值的方法
2015/07/11 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
python二元表达式用法
2019/12/04 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
应届生骨科医生求职信
2013/10/31 职场文书
临床医学应届生求职信
2013/11/06 职场文书
经济管理专业毕业生推荐信
2013/11/11 职场文书
档案接收函
2014/01/13 职场文书
市场专员岗位职责
2014/02/14 职场文书
公司委托书范本
2014/04/04 职场文书
求职信范文大全
2014/05/26 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书