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

摘要：(jsp需要引入：jquery-1.9.0.js、jquery.form.js)，jsp页面使用的是bootstrap制作的，看不懂的标签不...

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

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>

<div> <h1><img alt="fingerknow" src="${ctx}/images/fingerknow.png" width=""><small>中文最大的购物经验分享平台</small></h1> </div>

</div>

<div>

<div>

<span>

<i></i>

</span>

</div>

<div>

<div>

<div >

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

</div>

<div>

<label>*商圈logo：</label>

<div>

</div>

<div>

<label>*商圈英文名：</label>

<div>

</div>

<div>

</div>

</form>

</div>

</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'/>");

}else{

$("#businessName_error").attr("class","error_div").html("<img src='${ctx}/images/error_img2.gif'/>"+"商圈名不能为空！");

}

});

//验证商圈英文名

$("#businessEname").blur(function(){

var businessEname=$("#businessEname").val();

if(businessEname!=""){

$("#businessEname_error").html("<img src='${ctx}/images/success_img.gif'/>");

}else{

$("#businessEname_error").attr("class","error_div").html("<img src='${ctx}/images/error_img2.gif'/>"+"商圈英文名不能为空！");

}

});

//图片上传及数据保存

$("#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'/>"+"请添加商圈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'/>"+"图片格式不正确！");

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'/>"+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();

}

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

★ jQuery实现页面内锚点平滑跳转特效的方法总结

★ JQuery分屏指示器图片轮换效果实例

★ js兼容火狐显示上传图片预览效果的方法

★ 原生JS和JQuery动态添加、删除表格行的方法

★ 理解javascript中的with关键字

★ JS函数实现鼠标指向图片后显示大图代码

★ jQuery实现鼠标经过图片变亮其他变暗效果

★ jQuery异步上传文件插件ajaxFileUpload详细介绍

★ javascript制作的滑动图片菜单

★ javascript动态创建表格及添加数据实例详解

上一篇： js调用AJAX时Get和post的乱码解决方法

下一篇： jquery插件开发注意事项小结

学习工具