【Java Web】 第八章

本文详细阐述了文件上传的前端技术,包括表单构建、上传注意事项,以及后端使用Servlet处理文件上传的方法。同时介绍了数据校验的三层防线,包括前端JS校验、后台Java校验和数据库约束,特别强调了文件上传时的文件名唯一性处理。
摘要由CSDN通过智能技术生成

一.文件上传

    1.文件上传的应用场景:提交作业    上传头像       提交简历(上传附件)    上传商品,图书图片


    2.文件上传的前台如何编写以及注意事项:
            ①.肯定需要用到表单
            ②.文件上传的那一栏需要提供   input的type=file的组件,同样需要加name给后台获取
           ③.回顾form表单的三大属性:
                    A.action:表单的提交路径
                    B.method:表单的提交方式,2大默认值,一般都是post,很少使用get
                           get/post的区别:get不安全会把数据暴露在URL地址上,可以携带的数据非常少只有几KB,速度较快
                                          post安全不会把数据暴露在URL地址上,可以携带的数据非常多,速度较慢

                    C.enctype:表单的类型  三大默认值:
                            a.普通表单:application/x-www-form-urlencoded  默认就是
                            b.功能表单:multipart/form-data 普通表单的升级版,可以用来实现文件上传
                            c.功能表单:text/plain  普通表单的升级版,可以用来实现大文本表单提交

            ④.form表单属性需要注意的是:1.method必须为post   2.enctype必须为multipart/form-data

----------------------------------------------------------------------------------------------------------

            以上暂时省略文件上传相关的数据校验

----------------------------------------------------------------------------------------------------------

        3.文件上传的后台如何编写以及注意事项:
                  ①.肯定需要用到Servlet  (Servlet怎么写依然怎么写)
                  ②.在类名的上面在加一个额外的注解:@MultipartConfig 表示该Servlet支持处理文件上传
                  ③.需要接受文件  通过req.getPart("前台的文件的name值");
                                普通数据通过req.getParameter("前台的组件的name值")
                                文件类型数据通过req.getPart("xxx");
                 ④.获取文件的相关信息
                                 通过第三步的Part part = req.getPart("xxx");
                                 来获取相关信息
                                 System.out.println(part.getContentType());//获取文件的类型
                                 System.out.println(part.getSize());//获取文件的大小 单位是字节
                                 System.out.println(part.getSubmittedFileName());//获取文件名

                  ⑤.保存用户上传的文件
                        开始将用户上传的文件保存在本地服务器(本地的一个路径)
                        声明一个文件的保存路径
                        组装一下  需要将路径和文件名进行拼接
                        String path = "D:\\uploadTest\\" + part.getSubmittedFileName();
                        将part对象保存到path路径中 part.write(path);

课堂作业:实现文件上传,完成后将url地址发送给教师机。然后将我上传的文件,再次发送给教师机   完成+3分

----------------------------------------------------------------------------------------------

二.数据校验的三层防线:

1.前台的JS校验
2.后台的Java校验
3.数据库的约束校验    ---   主键约束    外键约束  唯一约束  自增约束   非空约束   检查约束   默认约束

JS数据校验的事件处理:
        1.onsubmit  提交表单的时候进行统一的校验

        2.onblur和onfouce  对表单内部的每个组件都进行一一校验

        3.onchange  常用于下拉框和file组件   值发生了改变才触发

        上述3个同时组合使用

校验分成三大类:
    1.文本类型校验 例如文本框密码框等
    2.单选框复选框校验 判断是否勾选的几个
    3.文件类型校验 判断文件大小,文件类型,文件后缀名

Jquery对象不允许使用JS的相关方法,反正亦然

        jquery对象和JS对象如何进行转换。

        let a1 = document.getElementById("file");//dom/js对象
        let a2 = $("#abc");//jquery对象

        js转成jquery对象
        $(a1)表示将a1对象转成了jquery对象

        jquery对象转成js对象
        a2[0];表示OK了


            let a1 = document.getElementById("abc");
            let a2 = $("#abc");
            // console.log(a1.innerText);   //按钮123
            // console.log(a2.innerText);   //报错
            // console.log(  a1.text()  );  //报错
            // console.log(  a2.text()  );  //按钮123
            // console.log( $(a1).text()  );
            // console.log(a2[0].innerText);


     files[xxx] 就是js的专属用法

     如果说非要在Jquery里面调用js的相关方法
        方法1:多写点代码 就使用DOM技术来获取JS对象
         let file = document.getElementById("file").files[0];

        方法2:将jquery对象转成JS对象
        let file = $("#file")[0].files[0];

后台校验:和前台校验思路是一致的

        需要额外的校验:文件名校验
        张三和李四和王五的文件都叫1.jpg   会导致文件的覆盖。

        解决方式:只需要保证文件名是独一无二的即可
        利用Java自带的UUID 即可
        UUID是Java生产一个随机字符串的工具类   可以保证UUID的唯一性

  • 24
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值