WEB页面通过ajax进行图片上传实例(附代码)
背景:公司需要一个签约页面,支持拍照或选择图片上传,应用场景主要在手机端.
页面代码:
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
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="输入证件号码"/>
27 label>
28 <div class="tips">
29
30 div>
31 div>
32 <div class="register-box">
33 <label for="username" class="other_label">手 机 号 码
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
52 <label for="username" class="other_label">身 份 证 正 面
53 <input maxlength="20" id = "idcard_positive" name = "idcard_positive" type="file" accept="image/*" 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 <input 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 阅读并同意
71 <a href="#">《服务合作协议》a>
72 <div class="tips">
73
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代码:
后端代码:
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");//身份证反面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部分:
- 关于form的enctype属性.描述如下
