hooyantsing's Blog

第102次课程_复习3_Web项目

字数统计: 1.9k阅读时长: 11 min
2020/02/11

源辰76班

第102次课程

2020.02.11

内容

复习3_Web项目

复习知识点:jQuery、Servlet

1.动态展示图片

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE HTML>
<html>
<head>
<title>Multiverse by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport"  content="width=device-width,  initial-scale=1, user-scalable=no" />
<!--[if lte IE 8]><script  src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet"  href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet"  href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet"  href="assets/css/ie8.css" /><![endif]-->
</head>
<body>
    <!-- Wrapper -->
    <div id="wrapper">
       <!-- Header -->
       <header id="header">
           <h1>
               <a href="index.html">
                  <strong>HOME</strong>
               </a>
           </h1>
           <nav>
               <ul>
                  <li><a href="#footer"  class="icon fa-info-circle">About</a></li>
               </ul>
           </nav>
       </header>
       <!-- Main -->
       <div id="main">
           <!--
           <article class="thumb">
               <a href="images/fulls/01.jpg"  class="image">
                  <img  src="images/fulls/01.jpg" alt="" />
               </a>
               <h2>照片名</h2>
               <p>照片介绍</p>
           </article>
            -->
       </div>
       <div class="copyrights">
           Collect from
           <a  href="http://www.hyycinfo.com/">源辰信息</a>
       </div>
       <!-- Footer -->
       <footer id="footer" class="panel">
           <div class="inner split">
               <div>
                  <section>
                      <h2>Magna feugiat sed  adipiscing</h2>
                      <p>Nulla consequat, ex  ut suscipit rutrum, mi dolor tincidunt erat,  et scelerisque turpis ipsum eget quis orci  mattis aliquet. Maecenas fringilla et ante  at lorem et ipsum. Dolor nulla eu bibendum  sapien. Donec non pharetra dui. Nulla  consequat, ex ut suscipit rutrum, mi dolor  tincidunt erat, et scelerisque turpis  ipsum.</p>
                  </section>
                  <section>
                      <h2>Follow me on  ...</h2>
                      <ul class="icons">
                          <li><a href="#"  class="icon fa-twitter">
                                 <span  class="label">Twitter</span>
                              </a></li>
                          <li><a href="#"  class="icon fa-facebook">
                                 <span  class="label">Facebook</span>
                              </a></li>
                          <li><a href="#"  class="icon fa-instagram">
                                 <span  class="label">Instagram</span>
                              </a></li>
                          <li><a href="#"  class="icon fa-github">
                                 <span  class="label">GitHub</span>
                              </a></li>
                          <li><a href="#"  class="icon fa-dribbble">
                                 <span  class="label">Dribbble</span>
                              </a></li>
                          <li><a href="#"  class="icon fa-linkedin">
                                 <span  class="label">LinkedIn</span>
                              </a></li>
                      </ul>
                  </section>
                  <p class="copyright">
                      &copy; Unttled. More  Templates
                      <a  href="http://www.hyycinfo.com/"  target="_blank" title="源辰信息">源辰信息</a>
                      - Collect from
                      <a  href="http://www.hyycinfo.com/" title="源辰信息" target="_blank">源辰信息</a>
                      .
                  </p>
               </div>
               <div>
                  <section>
                      <h2>Get in touch</h2>
                      <form method="post"  action="#">
                          <div class="field  half first">
                              <input  type="text" name="name" id="name"  placeholder="Name" />
                          </div>
                          <div class="field  half">
                              <input  type="text" name="email" id="email"  placeholder="Email" />
                          </div>
                          <div  class="field">
                              <textarea  name="message" id="message" rows="4"  placeholder="Message"></textarea>
                          </div>
                          <ul  class="actions">
                              <li><input  type="submit" value="Send" class="special"  /></li>
                              <li><input  type="reset" value="Reset" /></li>
                          </ul>
                      </form>
                  </section>
               </div>
           </div>
       </footer>
    </div>
    <!-- Scripts -->
    <script  src="assets/js/jquery.min.js"></script>
    <script  src="assets/js/jquery.poptrox.min.js"></script>
    <script  src="assets/js/skel.min.js"></script>
    <script  src="assets/js/util.js"></script>
    <!--[if lte IE 8]><script  src="assets/js/ie/respond.min.js"></script><![endif]-->
    <script  src="assets/js/main.js"></script>
    
    <script type="text/javascript">
       $(function(){
           $('#main').load("getImg.do");
       })
    </script>
</body>
</html>

GetImgServlet.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
package com.yc.photo.servlet;
import java.io.File;
import java.io.IOException;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;
@WebServlet("/getImg.do")
public class GetImgServlet extends  HttpServlet {
    private static final long  serialVersionUID = 1L;
    protected void doGet(HttpServletRequest  request, HttpServletResponse response)
           throws ServletException,  IOException {
       String webpath = "/images/fulls";
       // 获取应用上下文对象
       ServletContext application =  this.getServletContext();
       // 将web路径转成磁盘路径
       String diskpath =  application.getRealPath(webpath);
       // 创建文件对象
       File dir = new File(diskpath);
       // 获取目录下所有文件
       String[] filenameArray = dir.list();
       String s = "<article  class=\"thumb\">\n" +
               "   <a  href=\"images/fulls/%s\" class=\"image\">\n"  +
               "      <img  src=\"images/fulls/%s\" alt=\"\" />\n" +
               "   </a>\n" +
               "   <h2>照片名</h2>\n" +
               "   <p>照片介绍</p>\n" +
               "</article>";
       
       for(String filename:filenameArray) {
           String ss = String.format(s,  filename,filename);
           response.getWriter().append(ss);
       }
    }
    /**
     * @see  HttpServlet#doPost(HttpServletRequest  request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest  request, HttpServletResponse response)
           throws ServletException,  IOException {
       // TODO Auto-generated method stub
       doGet(request, response);
    }
}

2.文件上传(form方式)

web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="UTF-8"?>
<web-app  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xmlns="http://xmlns.jcp.org/xml/ns/javaee"  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee  http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">
   <display-name>C71-S3-Ply-phone</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
     <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
      <servlet-name>文件上传</servlet-name>
       <servlet-class>com.yc.photo.servlet.UploadServlet</servlet-class>
       <!-- 文件夹上传 -->
      <multipart-config></multipart-config>
  </servlet>
  
  <servlet-mapping>
      <servlet-name>文件上传</servlet-name>
      <url-pattern>/upload.do</url-pattern>
  </servlet-mapping>
</web-app>

UploadServlet.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package com.yc.photo.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
   
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Part part = request.getPart("file");
        String filename = part.getSubmittedFileName();
        part.write("G:/YC74/200211_复习3/testbox/" + filename);
        
        response.getWriter().append("success");
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

upload.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="upload.do" method="post"  enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="上传">
</form>
</body>
</html>

3.文件上传(ajax方式)

upload.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form id="ff" action="upload.do"  method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="button"  onclick="postData()" value="上传">
</form>
</body>
<script  src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
    function postData(){
       var formData = new FormData(ff);
       $.ajax({
           url:'upload.do',
           type:'post',
           data:formData,
           contentType:false,
           processData:false,
           success:function(res){
               if(res=="success"){
                  location.href =  "index.html";
               } else {
                  alert('失败');
               }
           }
           
       });
    }
</script>
</html>
CATALOG