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

　　(jsp需要引入：jquery-1.9.0.js、jquery.form.js ) ，jsp页面使用的是bootstrap制作的，看不懂的标签不用管，form表单大同小异。代码比较简陋，只是为了演示使用ajaxSubmit异步上传图片及保存数据，请海含！

　　(参考文献：http://www.glzy8.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>

　　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="span11"> <h1 class="page-header" style="background:black;"><img alt="fingerknow" src="${ctx}/images/fingerknow.png" width=""><small>中文最大的购物经验分享平台</small></h1> </div>

　　</div>

　　</span>

　　</div>

　　<input type="text" name="userId" maxlength="20" value="<%=userId%>" id="userId" width="200px;"/>

　　</div>

　　<label class="control-label">*商圈logo：</label>

　　</div>

　　<label class="control-label">*商圈英文名：</label>

　　</div>

　　</div>

　　</form>

　　</div>

　　</div>

　　</div>

　　/**

　　* 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);

　　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();

　　}

教程首页更多教程