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

Posted 2022-07-20 知

篇首语：人生难得几回搏，此时不搏待何时。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码相关的知识，希望对你有一定的参考价值。

jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

代码如下: <%@page import=" fingerknow project vo UserInformation"%> <%@ page language="java" contentType="text/; charset=utf " pageEncoding="utf "%> <%@ taglib uri="%> <c:set var="ctx" value="$pageContext request contextPath " /> <!DOCTYPE PUBLIC " //W C//DTD HTML Transitional//EN" " <> <head> <meta equiv="Content Type" content="text/; charset=utf "> <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/select css" /> <link rel="stylesheet" href="$ctx/css/unicorn main css" /> <link rel="stylesheet" href="$ctx/css/mon css" /> <% response setCharacterEncoding("utf ");//这个是设置编码方式 response setContentType("text/");//这个是设置网页类型为文本代码 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 >登录</a>"; %> </head> <body> <div > <div > <div > <div > <div > <h ><img src=$ctx/images/fingerknow png width=><small>中文最大的购物经验分享平台</small></h > </div> <div > <a href="#">首页</a> |<a href="#">帮助</a></div> </div> </div> </div> </div> <div id="businessEname_div"> <div > <div ></div> <div > <div > <div > <span > <i ></i> </span> <h >注册商圈</h > </div> <div > <form method="post" action="$ctx/upload/upload do" id="uploadImgForm" enctype="multipart/form data"> <div > <label >*商圈名 </label> <div > <input type=text name=businessName maxlength=" " id="businessName" width= px;/> <input type=text name=userId maxlength=" " value="<%=userId%>" id="userId" width= px;/> <div id="businessName_error" ></div> </div> </div> <div > <label >*商圈logo </label> <div > <input type=file name=file id="file"> <div id="file_error"></div> </div> </div> <div > <label >*商圈英文名 </label> <div > <input type=text name=businessEname id="businessEname" /> <div id="businessEname_error"></div> </div> </div> <div > <button type=button id="imgSave" value="Validate" >提交注册</button> </div> </form> </div> </div> </div> <div ></div> </div> </div> <div > <div > <div > <p>© fingerknow <span>|</span><a href="#" rel="nofollow" >隐私条款</a><span>|</span><a href="#" rel="nofollow">服务条款</a><span>|</span><a href="#" rel="nofollow" >粤ICP备号 </a></p> </div> </div> </div> <script src=$ctx/js/jquery js></script> <script src=$ctx/js/jquery form js></script> <script type=text/javascript> /** * * V */ $(document) ready(function() //验证商圈名 $("#businessName") blur(function() var businessName=$("#businessName") val(); if(businessName!="") $("#businessName_error") ("<img src=$ctx/images/success_img gif style=width: px;height: px; />"); else $("#businessName_error") attr("class" "error_div") ("<img src=$ctx/images/error_img gif style=width: px;height: px; />"+"商圈名不能为空！"); ); //验证商圈英文名 $("#businessEname") blur(function() var businessEname=$("#businessEname") val(); if(businessEname!="") $("#businessEname_error") ("<img src=$ctx/images/success_img gif style=width: px;height: px; />"); else $("#businessEname_error") attr("class" "error_div") ("<img src=$ctx/images/error_img gif style=width: px;height: px; />"+"商圈英文名不能为空！"); ); //图片上传及数据保存 $("#imgSave") click(function() var ext = jpg jpeg gif bmp png ; var f=$("#file") val(); if (f== "") //先判断是否已选择了文件 $("#file_error") attr("class" "error_div") ("<img src=$ctx/images/error_img gif style=width: px;height: px; />"+"请添加商圈logo！"); return false; f = f substr(f lastIndexOf( ) + ) toLowerCase(); if (ext indexOf( + f + ) == ) $("#file_error") attr("class" "error_div") ("<img src=$ctx/images/error_img gif style=width: px;height: px; />"+"图片格式不正确！"); return false; var options = url: "$ctx/upload/upload do" dataType: json contentType: "application/json; charset=utf " success: function(data) // data is an object representing the the evaluated json data // 如果图片上传成功则保存表单注册数据 if(data status==" ") 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 " success: function (data) if(data status==" ") alert("注册成功!"); else alert("注册失败!原因是 "+data message); error: function (XMLHttpRequest textStatus errorThrown) alert(errorThrown); ); else $("#file_error") attr("class" "error_div") ("<img src=$ctx/images/error_img gif style=width: px;height: px; />"+data message); ; // 提交表单 $( #uploadImgForm ) ajaxSubmit(options); ); ); </script> </body> </> 二 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()/ >= * ) resultMap put("status" ); resultMap put("message" "图片不能大于 M"); 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" ); resultMap put("fileName" newRealFileName); catch (Exception e) resultMap put("status" ); 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/;charset=UTF "); out write(JSONSerializer toJSON(resultMap) toString()); out flush(); out close(); cha138/Article/program/Java/JSP/201311/19993