jQuery's ajaxSubmit() asynchronously uploads images and saves form data demo code

Others 2022-04-22 11:36:21 views: 0
(jsp needs to be imported: jquery-1.9.0.js, jquery.form.js), the jsp page is made by bootstrap, and the unreadable tags are ignored, the form form is similar. The code is relatively simple, just to demonstrate the use of ajaxSubmit to upload pictures and save data asynchronously, please include it!
(Reference: http://www.jb51.net/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html )
One: web (add.jsp)
Copy the code The code is as follows:

<%@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>The largest shopping experience sharing platform in Chinese</small></h1> </div> </div> </div>
<div class="span1"> <a href="#">Home</a> |<a href="#" >Help</a></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;'/>" +"The English name of the business district cannot be empty!");
}
"+" image format is incorrect! "); 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", /*This sentence can be used or not, it has no effect*/
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data.status=="0"){
alert("Registration succeeded!");
}else{
alert("Registration failed! Reason is: "+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);
}
}
};
// Submit form
$('#uploadImgForm').ajaxSubmit(options);
});
});
</script>
</body>
</html>

Two: service (FileUploadController.java ---- the controller layer of springMVC)
Copy the code The code is as follows:

@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", "image upload error");
logger.info(" ***** Image upload error *****");
System.out.println(e);
} finally {
PrintWriter out = null;
try {
out = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
//The character encoding must be set, otherwise the returned json will be garbled
response.setContentType("text/html;charset=UTF-8");
out.write(JSONSerializer.toJSON(resultMap).toString() );
out.flush();
out.close();
}
}
}

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324995455&siteId=291194637
Recommended
Rushing to the GitHub hot list——How can open source programming languages and frameworks be so cute?
Beijing Humanoid Robot Innovation Center launches Tiangong, the world's first full-size humanoid robot with purely electric drive for anthropomorphic running
Ranking
8个无需编写代码即可使用 Python 内置库的方法
Java collections interview knowledge Lite
Machine learning algorithms foundation - Introduction a (watermelon materials for the book)
(Easy) Ransom Note - LeetCode
[Five days] Qt from entry to actual combat: the second day
Remember once extremely pit father can not download Maven Jar package of issues: IDEA question
The minimum cost Shortest
OSPF study map (the most complete version)
Network Takeaways
GnuPG
Daily
More
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

Code World

© 2018 codetd.com