4/26day42_文件上传综合案例

作者: 蹦蹦跶跶的起床啊 | 来源:发表于2020-05-15 21:41 被阅读0次

4/26day42_文件上传综合案例
文件上传与下载综合案例
文件上传（学习笔记）
上传文件
requests文件上传
FormData提交文件、图片，文本复制
element上传文件案例
文件上传代码阅读
Spring Boot 2.X 实现文件上传（三）
Spring boot 基于ajax 文件上传下载

回顾

1. listener监听器
    监听三大域对象的创建和销毁，request、session、servletContext
    快速入门
        1.普通类，实现listener接口
        2.重写抽象方法，创建和销毁
        3.配置
          web.xml
          注解
    统计在线人数
        

2. 综合案例
    使用mvc和三层架构的思想实现用户模块的增删改查
        程序入口（浏览器）---servlet（转发、重定向）---service---dao

AJAX&文件上传

今日目标

1. json
    java和json数据相互转换
    
2. 校验用户名是否存在

3. 文件上传【可以照着抄一遍...】

4. 安装mysql5.7版本（如果mysql5.6以上可以继续使用....）

一 JSON

1.1 回顾

最早是JavaScript对象表示形式，现在主要用于互联网传输数据载体

* java
        User user =new User();
            user.setUsername("jack");
            user.setAge(18);
            
* javaScript
        let user = {"username":"jack","age":18};
        
        let array = [{},{},{}]
        
        name:都是字符串
        value：支持各种类型

JSON 比 XML 更小、更快，更易解析

1587864032897.png

1.2 JSON数据与java对象转换

常见的解析器

工具名称	介绍
Jsonlib	Java 类库，需要导入的jar包较多
Gson	google提供的一个简单的json转换工具
Fastjson	alibaba技术团队提供的一个高性能的json转换工具
Jackson	开源免费的json转换工具，springmvc转换默认使用jackson

1587864344057.png

使用jackson，需要导入jar包

1587864541216.png

提供了一个核心转换器对象

ObjectMapper  om = new ObjectMapper();

1.2.1 java对象转为json（字符串）【重点】

String writeValueAsString(Object object);

    // 将user对象转为json字符串
    @Test
    public void UserToJson() throws Exception {
        User user = new User("1", "lucy", "女", 15, "德克萨斯", "123", "123@qq.com");

        // 创建jackson转换器对象
        ObjectMapper om = new ObjectMapper();

        // 将任意对象转为json字符串
        String json = om.writeValueAsString(user);
        System.out.println(json); // 在java中name必须使用双引号包裹起来
    }

    // 将map集合转为json字符串
    @Test
    public void MapToJson() throws Exception {
        Map<String, Object> map = new HashMap<>();
        map.put("name", "张三");
        map.put("age", 18);

        // 创建jackson转换器对象
        ObjectMapper om = new ObjectMapper();

        // toJson
        String json = om.writeValueAsString(map);
        System.out.println(json); //  {"name":"张三","age":18}
    }

    // 将list集合转为json数组字符串
    @Test
    public void ListToJson() throws Exception {
        List<User> list = new ArrayList<>();
        list.add(new User("1", "lucy", "女", 15, "德克萨斯", "123", "123@qq.com"));
        list.add(new User("2", "jack", "男", 15, "德克萨斯", "123", "123@qq.com"));

        // 创建jackson转换器对象
        ObjectMapper om = new ObjectMapper();

        // toJson
        String json = om.writeValueAsString(list);
        System.out.println(json); // [{},{}]
    }

1.2.2 将json（字符串）转为java对象【了解】

T readValue(String json,Class<T> classType);

    // 将json字符串转为user对象
    @Test
    public void JsonToUser() throws Exception {
        String json = "{\"id\":\"1\",\"name\":\"lucy\",\"sex\":\"女\",\"age\":15,\"address\":\"德克萨斯\",\"qq\":\"123\",\"email\":\"123@qq.com\"}";

        // 创建jackson转换器对象
        ObjectMapper om = new ObjectMapper();

        // toUser
        User user = om.readValue(json, User.class);
        System.out.println(user);
    }

    // 将json字符串转为map集合（如果你获取的json格式没有对应的java实体对象，就可以拿map接收）
    @Test
    public void JsonToMap() throws Exception {
        String json = "{\"name\":\"lucy\",\"age\":18}";

        // 创建jackson转换器对象
        ObjectMapper om = new ObjectMapper();

        // toMap
        Map<String, Object> map = om.readValue(json, Map.class);
        System.out.println(map);
    }

    // 将json数组字符串转为list集合
    @Test
    public void JsonToList() throws Exception {
        String json = "[{\"id\":\"1\",\"name\":\"lucy\",\"sex\":\"女\",\"age\":15,\"address\":\"德克萨斯\",\"qq\":\"123\",\"email\":\"123@qq.com\"},{\"id\":\"2\",\"name\":\"jack\",\"sex\":\"男\",\"age\":15,\"address\":\"德克萨斯\",\"qq\":\"123\",\"email\":\"123@qq.com\"}]";

        // 创建jackson转换器对象
        ObjectMapper om = new ObjectMapper();

        // toList
        List list = om.readValue(json, List.class);
        System.out.println(list);
    }

1.3 自定义模板

1587866270735.png

二案例:检查用户名是否可用

需求

在用户注册页面，输入用户名，当用户名输入框失去焦点时，发送异步请求，将输入框的用户名传递给服务器进行是否存在的校验。

2.1 技术分析

此需求使用了ajax技术：通过==异步提交==，实现页面的==局部刷新==，提高用户的体验

JQuery提供的ajax函数

* ajax
        $.ajax({
            type:"请求方式，get|post",
            url:"请求服务器地址",
            data:"请求参数",
            success:function(resp){
                resp就是服务器返回的结果...
            }
        });

* get
        $.get(url(地址?参数),function(resp){
            
        });


* post
        $.post(url,data,function(resp){
            
        })

2.2 需求分析

1587868403078.png

2.3 代码实现

① index.jsp

1587868753719.png

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>${NAME}</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
</head>
<body>
<h3>用户注册</h3>
<form action="#" method="post">
    用户名：<input type="text" name="username" id="username"> <span id="userwarn"></span> <br>
</form>

<script>
    // 给用户文本框绑定失去焦点事件
    $('#username').blur(function () {
        // 获取用户输入的值
        console.log(this.value);
        let data = "username=" + this.value;
        // 发送ajax请求
        $.ajax({
            type:"post",
            url:'${pageContext.request.contextPath}/CheckServlet',
            data:data,
            success:function (resp) {
                console.log(resp);
                // 判断结果并实现局部刷新
                if(resp.flag){
                    $('#userwarn').text(resp.msg).css('color','green');
                }else{
                    $('#userwarn').text(resp.msg).css('color','red');
                }
            }
        })
    })
</script>
</body>
</html>

② CheckServlet

@WebServlet("/CheckServlet")
public class CheckServlet extends HttpServlet {

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        // 1.接收请求参数
        String username = request.getParameter("username");

        // 2.声明map集合
        Map<String, Object> map = new HashMap<>();

        // 3.判断用户是否存在
        if(username.equals("jack")){
            map.put("flag",false);
            map.put("msg", "× 此用户已注册");
        }else{
            map.put("flag",true);
            map.put("msg", "√ 此用户可以注册");
        }

        // 4.将map集合转为json字符串
        ObjectMapper om = new ObjectMapper();
        String json = om.writeValueAsString(map);
        System.out.println(json);

        // 5.设置json的MIME类型
        response.setContentType("application/json;charset=utf-8");

        // 6.response响应json到客户端
        response.getWriter().write(json);
    }

}

三案例:文件上传

需求

在用户注册页面，我们可以输入用户名，还可以选择要上传的文件；点击提交按钮，就可以将用户输入的内容和选择的文件保存到服务器上

3.1 技术分析

1587870989239.png

3.1.1 客户端如何将文件转为文本

1. 表单提交方式必须为post
        action="post"
        
2. 表单的enctype属性值必须为multipart/form-data 多组件表单数据
        enctype="multipart/form-data"
        
3. 在表单中提供文件上传项
    <input type="file" name="pic">

1587871962157.png

3.1.2 服务器将文本转为字节流

使用apache提供工具类 commons-fileupload（今天讲，最麻烦的....）
使用servlet3.0版本，通过注解实现（黑马旅游网）
使用springMVC框架（最简单，底层使用commons-fileupload）

3.1.2 代码实现【课下抄一遍即可】

① 导入文件上传相关jar包

1587872397979.png

1587872441280.png

② index.jsp

1587872494757.png

③ 指定服务器保存文件路径

1587872548319.png

④ 编写servlet接收文件并保存

步骤分析

1. 创建磁盘文件项工厂

2. 创建核心解析对象（依赖工厂对象）

3. 解析request对象，返回上传项list集合

4. 遍历list，获取每一个上传项

5. 判断
      普通上传项
        name和value
      文件上传项
        文件名
        字节输入流
        保存服务器端

@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            // 1.创建磁盘文件项工厂
            DiskFileItemFactory factory = new DiskFileItemFactory();
            // 2.创建上传解析器对象（依赖工厂对象）
            ServletFileUpload fileUpload = new ServletFileUpload(factory);
            // 3.解析request请求，返回上传项list集合
            List<FileItem> fileItems = fileUpload.parseRequest(request);
            // 4.遍历list
            for (FileItem fileItem : fileItems) {
                // 5.判断是文件项还是普通项
                if (fileItem.isFormField()) {// 普通上传项
                    // 获取name属性名
                    String name = fileItem.getFieldName();
                    // 获取value属性值
                    String value = fileItem.getString();
                    System.out.println("普通上传项：" + name + "=" + value);
                } else {// 文件上传项
                    // a.获取文件名   demo.txt
                    String fileName = fileItem.getName();
                    // b.获取文件字节输入流
                    InputStream in = fileItem.getInputStream();
                    // c.获取文件扩展名
                    String extName = FileUtil.extName(fileName);
                    // d.生成随机文件名
                    fileName = IdUtil.simpleUUID() + "." + extName;

                    // 此文件名会保存数据库一份，给用户查询使用...

                    // 获取upload目录在服务器真实路径
                    String realPath = request.getServletContext().getRealPath("/upload/");

                    // 判断此目录是否存在
                    File dirFile = new File(realPath);
                    if (!dirFile.exists()) {
                        dirFile.mkdirs(); // 如果不存在自己创建
                    }

                    // 设置文件字节输出流
                    FileOutputStream out = new FileOutputStream(realPath + fileName);

                    // 流的拷贝
                    IoUtil.copy(in, out);

                    // 关流
                    out.close();
                    in.close();

                    response.getWriter().write("success");
                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        }
    }

}

4/26day42_文件上传综合案例
回顾 AJAX&文件上传今日目标一 JSON 1.1 回顾最早是JavaScript对象表示形式，现在主要用...
文件上传与下载综合案例
因为前面已经详细介绍了上传与下载的步骤，所以这个综合案例我就直接放源代码了，里面注释都很详细。特别说明：删除文件...
文件上传（学习笔记）
应用案例——文件上传 form.html + UploadServlet 通过该案例了解文件上传时服务器如何获取...
上传文件
上传文件，定位到上传文件元素，将文件上传。案例：在百度搜索上传本地图片进行搜索。
requests文件上传
1、普通文件上传 2、定制化文件上传 3、多文件上传 4、流式上传
FormData提交文件、图片，文本复制
1.利用FormData提交文件、图片案例：上传图片、文件（不依赖后台接口）解决方法：（核心代码）1、文件上传 ...
element上传文件案例
文件上传代码阅读
1.多文件上传循环调用单文件上传方法uploadFile（） 3.设置文件路径及文件名4.文件上传核心CUploa...
Spring Boot 2.X 实现文件上传（三）
使用 SpringBoot 项目完成单个、多个文件的上传处理，并将上传的文件保存到指定目录下。代码演示案例所有...
Spring boot 基于ajax 文件上传下载
1.配置静态文件访问路径 2.配置文件上传大小 3.多文件上传接口，下载文件接口 4.文件上传工具类 5.文件上传页面