萬盛學電腦網 >> 腳本專題 >> javascript >> jquery的ajaxSubmit()異步上傳圖片並保存表單數據演示代碼
jquery的ajaxSubmit()異步上傳圖片並保存表單數據演示代碼
一：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&qujavascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved