一.文件上传
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的唯一性