一：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(); } } }