Background: The company needs a signed page, select the photo or image upload support, application scenarios, mainly in the mobile phone side.
Page code:
1 <!DOCTYPE html> 2 <html> 3 <head > 4 <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=0.8 minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 5 <title></title> 6 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 7 <link rel="stylesheet" type="text/css" href="css/index.css"/>
8 </head> 9 <body> 10 <header> 11 <!-- <a href="#" class="logo"></a> --> 12 <div class="desc">欢迎签约</div> 13 </header> 14 <section> 15 <form id="upload-form" enctype="multipart/form-data"> 16 <div class="register-box"> 17 <label for="username" class="other_label">真 实 姓 名 18 <input maxlength="20" name ="shortName" type="text" placeholder="输入真实姓名"/> 19 </label> 20 <div class="tips"> 21 22 </div> 23 </div> 24 <div class="register-box"> 25 <label for="username" class="other_label">证 件 号 码 26 <input maxlength="20" name = "crpIdNo" type="text" placeholder= "Enter document number" /> 27 </ label > 28 < div class = "Tips" > 29 30 </ div > 31 is </ div > 32 < div class = "Register-Box" > 33 is < label for = " username " class =" other_label " > phone number 34 <input maxlength="20" name = "mobilePhone" type="text" placeholder="输入手机号"/> 35 </label> 36 <div class="tips"> 37 38 </div> 39 </div> 40 <div id="checkResult"></div> 41 <div class="register-box"> 42 <label for="username" class="other_label">银 行 卡 号 43 <input maxlength="20" name = "bankNumber" type="text" placeholder="输入银行卡号"/> 44 </label> 45 <div class="tips"> 46 47 </div> 48 </div> 49 <!-- 身份证正面 --> 50 <div class="register-box"> 51 <!-- capture="camera" --> 52 <label for="username" class="other_label">身 份 证 正 面 53 <input maxlength="20" id = "idcard_positive" name = "idcard_positive" type="file" accept="image/*"/>= "positive identification" placeholder 54 </label> 55 <div class="tips"> 56 57 </div> 58 </div> 59 <!-- 身份证反面 --> 60 <div class="register-box"> 61 <label for="username" class="other_label">< 62 Reverse IDinput maxlength="20" id = "idcard_reverse" name = "idcard_reverse" type="file" accept="image/*" placeholder="身份证反面"/> 63 </label> 64 <div class="tips"> 65 66 </div> 67 </div> 68 <div class="arguement"> 69 < INPUT type = "CheckBox" ID = "xieyi" /> 70 read and agree to 71 is < A the href = "#" > "service agreement" </ A > 72 < div class = "Tips" > 73 is 74 </ div > 75 </ div > 76 </ div > 77 78 <div class="submit_btn"> 79 <button type="button" onclick="go()" id="submit_btn">立 即 签 约</button> 80 </div> 81 </form> 82 </section> 83 <script src="js/index.js" type="text/javascript" charset="utf-8"></script> 84 85 </body> 86 </html>
js code:
<Script type = "text / JavaScript">
$ (function () {
// focus defocus INPUT
$ ( 'INPUT'). EQ (0) .focus (function () {
IF ($ (the this) .val () == 0 .length) {
. $ (the this) .parent () Next ( "div") text ( "support Chinese, letters, numbers, '-', '_' various combinations of");
}
}) ;
// INPUT various determinations
// name:
. $ ( 'INPUT') EQ (0) .blur (function () {
. IF ($ (the this) .val () length == 0) {
$ (the this) . .parent () next ( "div ") text ( " real name can not be empty");.
.. $ (the this) .parent () the Next ( "div") CSS ( "Color", 'Red');
}
});
// identity
$ ( 'INPUT') EQ (. 1) .blur (function (.) {
IF {($ (the this) .val () == 0 length.)
$ (the this) .parent ( ) .next ( "div") .text ( "ID number can not be empty"); ) .text ( "ID number can not be empty");
.. $ (the this) .parent () the Next ( "div") CSS ( "Color", 'Red');
}
});
// bank card
$('input').eq(3).blur(function(){
if($(this).val().length==0){
$(this).parent().next("div").text("银行卡不能为空");
$(this).parent().next("div").css("color",'red');
}
});
});
function go(){
console.log("点击提交按钮");
if($("#xieyi")[0].checked){
for(var j=0 ;j<4;j++){
if($('input').eq(j).val().length==0){
$('input').eq(j).focus();
if(j==4){
$('input').eq(j).parent().next().next("div").text("此处不能为空");
$('input').eq(j).parent().next().next("div").css("color",'red');
... $ ( 'INPUT') EQ (J) .parent () Next (. "Tips") text ( "herein is not empty");
}
return;
... $ ( 'INPUT') EQ (J) .parent () Next (. "Tips") CSS ( "Color", 'Red'); function (Result) {
the console.log ( "success response");
return;
}
};
Var form = document.getElementById ( "Upload-form"); // data acquired form
var formdata = new FormData (form) ; // data formatted form
the console.log ( "complete form data format" + FormData);
$ .ajax ({
// request mode
type: 'the POST',
the processData: to false, // do not tell jQuery to handle data sent
contentType: false, // do not tell jQuery request to set the Content-type header
/ * dataType: 'json', * / // set the data type of the return
address of the transmission request //
URL: 'HTTP: // localhost: 8095 / hk_partner / SignContractAction / SignContract.action',
data: FormData,
Success: function ( Result) {
Alert (Result);
}
});
the console.log ( "ajax request completed ");
}else{
$("#xieyi").next().next(".tips").text("请阅读协议");
$("#xieyi").next().next(".tips").css("color",'red');
e.preventDefault();
return;
}
}
</script>
Back-end code:
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
public void SignContract(HttpServletRequest request,HttpServletResponse response) {
String shortName = request.getParameter("shortName");
String bankNumber = request.getParameter("bankNumber");
String crpIdNo = request.getParameter("crpIdNo");
String mobilePhone = request.getParameter("mobilePhone");
MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;
MultipartFile positive = mRequest.getFile("idcard_positive");//身份证正面
MultipartFile reverse = mRequest.getFile("idcard_reverse");// ID back
try {
if (positive.getSize () == 0)
outPrint(response,"需上传身份证正面");
return;
};
if(reverse.getSize()==0) {
outPrint(response,"需上传身份证正面");
return;
};
}catch (Exception e) {
return;
}
}
public static void outPrint(HttpServletResponse response,Object obj) throws IOException{
response.setContentType("text/html;charset=UTF-8");
response.setHeader("progma","no-cache");
response.setHeader("Cache-Control","no-cache");
PrintWriter out = response.getWriter();
out.print(obj);
out.flush();
out.close();
}
-
1. js pages and sections:
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=0.8 minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
Description: adaptive device width, initialize the scaling factor 0.8, the minimum scale 0.5, 2.0 maximum zoom user adjustable.
-
Enctype attribute on the form. Described below
<form id="upload-form" enctype="multipart/form-data">
|
value
|
description
|
|
application/x-www-form-urlencoded
|
Coding all the characters (default) before sending
|
|
multipart/form-data
|
Not the character encoding.
When using the form contains file upload control, you must use this value.
|
|
text/plain
|
Spaces converted to "+" plus, but not a special character encoding.
|
-
jQuery selector problem
<input type="checkbox" id="xieyi"/>
For determining whether the checkbox is checked jQuery var status = $ ( "# xieyi") [0] .checked; // check status = true false unchecked
if (.. $ ( 'input') eq (j) .val () length == 0) {....} // jQuery selector Description of eq: input value of the j-th element of the type of length
// eq selector Usage: eq () selector selecting elements with the specified index value.
// index values from 0, index values for all of the first element is 0 (not 1).
focus () and Blur () are a function of focus and out of focus
-
2.java Code:
-
Configuration Upload spring-mvc.xml
<! - uploaded file settings ->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8" />
<Property name = "maxUploadSize" value = "32505856" /> <-! Upload file size limit of 31M, 31 * 1024 * 1024 ->
<property name="maxInMemorySize" value="4096" />
</bean>
-
Get file 1, obtained by the parameter name
// Get the picture parameters: MultipartFile This class is generally used to accept the file transfer over the front desk
MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request; //// conversion request, parses the request file
MultipartFile positive = mRequest.getFile ( "idcard_positive"); // positive ID
MultipartFile reverse = mRequest.getFile ( "idcard_reverse"); // reverse ID
-
Get file 2, traversing get
// conversion request, parse out the file request
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// Get the map file collection
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
String fileName = null;
// Loop through, remove a single file
for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
// Get a single file
MultipartFile mf = entity.getValue();
// get the original file name
fileName = mf.getOriginalFilename();
// file type taken; herein can be determined according to the file type
String fileType = fileName.substring(fileName.lastIndexOf('.'));
// intercept the uploaded file name
String newFileName = fileName.substring(0, fileName.lastIndexOf('.'));
End.