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

(jsp需要引入 ：jquery-1.9.0.js、jquery.form.js ) ，jsp页面使用的是bootstrap制作的，看不懂的标签不用管，form表单大同小异。代码比较简陋，只是为了演示使用ajaxSubmit异步上传图片及保存数据，请海含！
(参考文献：http://www.jb51.net/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();
}
}
}

时间： 2024-10-25 18:46:00

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

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

 一:web (add.jsp)   代码如下: <%@page import="com.fingerknow.project.vo.UserInformation"%>  <%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>  <%@ taglib uri="htt

javascript定时保存表单数据的代码_javascript技巧

(忘记是不是两家邮箱都有这个功能). 那这个功能是怎么做的呢? 定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据.但是,这个却有个缺点:那就是刷新页面后,数据将会丢失. 而此时,就该轮到我们很少关注,而且估计有不少人不知道的UserData 行为(userData Behavior)登场了: 而这个UserData是什么?怎么用?,我将在文章最后转载一篇介绍它的文章. 现在,我直接上例子,所谓无代码,无真相嘛: 复制代码 代码如下: <!DOCTYPE html PUBLIC

Jquery判断form表单数据是否变化_jquery

本文实例为大家分享了Jquery判断form表单数据是否变化的三大步骤,供大家参考,具体内容如下 1.思路为:修改时点击一行datagrid,并进行页面跳转数据绑定,在提交form时,序列号form表单,并重新获取datagrid选中的行数据,进行数据比较.</span>  /** * 判断form内属性值是否被修改 * * @param jsonForm 对应修改的form序列化后的json数据 * @param row 对应datagrid选中的数据源 * * @Return true 存

保存表单数据的问题

问题描述 网页上有很多表单数据,文本框,多选框,单选框等.有几百个.现在需要,当客户填写到一半,不想填了,下次来的时候可以保存已经填好的数据,可以继续填.说明:这个表单的数据本身就不提交到后台的.只是让客户填好直接打印的.如果数据少,可以用cookie,甚至数据库保存,但是数据量太大了.如果网页另存为到本地,能够保存表单的数据倒也可以的.问题就是网页另存后表单的数据就没了.大家有什么好的办法. 解决方案 解决方案二:useautoformfiller,somethinglikegooglebar

jQuery ajax中使用serialize()方法提交表单数据示例_AJAX相关

jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2-)后提交.serialize() 方法使用标准的 URL-encoded 编码表示文本字符串.下面是使用serialize()序列化表单的实例: 复制代码 代码如下: $.ajax({   type: "POST",   url: ajaxCallU

Jquery练习之表单验证实现代码_jquery

Jquery练习表单验证 复制代码 代码如下: <body> <form action="" method="post" id ="myform"> <table> <tr> <td>姓名:</td> <td><input type ="text" id = "name" name ="name"&

jQuery ajax中使用serialize()方法提交表单数据示例

jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2-)后提交.serialize() 方法使用标准的 URL-encoded 编码表示文本字符串.下面是使用serialize()序列化表单的实例: 复制代码 代码如下: $.ajax({    type: "POST",    url: ajaxCal

基于jQuery下拉选择框插件支持单选多选功能代码_jquery

由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表 具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu

jquery层级选择器(匹配父元素下的子元素实现代码)_jquery

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>层级 </title&g