课程笔记Day43

• 上传和下载
• JQuery

第一章 上传和下载

第01节 上传操作

1、方案一

要求：

前端页面:form 表单的要求:1、提交方式必须是 post 提交。2、需要指定表单的类型 enctype="multipart/form-data"3、需要指定 input 标签的 type="file" name="xxx"后端实现:Servlet 当中的实现1、在Servlet当中需要指定注解 @MultipartConfig2、获取到 part 的值, 采用请求进行获取 Part p =req.getPart("xxx");3、写数据到指定路径 p.write("路径");

代码：

位置 web/upload/upload01.jsp

<%--http://localhost:8080/JavaWebDay21/upload/upload01.jsp
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>




 文件上传版本1 - Part 原始版本 
 
 

位置： src/blb.chc02.UpLoad01Servlet

/**** 强调： 这里需要加上注解  @MultipartConfig 表示支持 part提交的方式*/
@WebServlet("/UpLoad01Servlet")
@MultipartConfig
public class UpLoad01Servlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("UpLoad01Servlet.doGet");doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("UpLoad01Servlet.doPost");//获取到数据，获取到普通文本框的数据String username = req.getParameter("username");System.out.println("username = " + username);//获取到文件的数据。文件需要通过 getPart("xxx") 获取Part p = req.getPart("upfile");//获取到文件的名称String fileName = p.getSubmittedFileName();//获取到准备存放文件的路径String path = req.getServletContext().getRealPath("/");System.out.println("path = " + path);//准备写数据p.write(path + "/" + fileName);}
}

2、方案二

要求：

前端页面:form 表单的要求:1、提交方式必须是 post 提交。2、需要指定表单的类型 enctype="multipart/form-data"3、需要指定 input 标签的 type="file" name="xxx"后端实现:导入两个 jar 包：1、commons-fileupload-1.3.1.jar2、commons-io-2.4.jarServlet 当中的实现1、在Servlet当中操作流程:A. 磁盘工厂 	DiskFileItemFactoryB. 上传文件对象  ServletFileUploadC. 表单项集合    List2、对集合进行遍历，获取得到FileItemA. 判断是否是 普通的文本输入框  fileItem.isFormField()B. 判断是否不为 普通文本输入框,那么就是 上传的输入框

代码：

位置 web/upload/upload02.jsp

<%--http://localhost:8080/JavaWebDay21/upload/upload02.jsp
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>




 文件上传版本2 - FileUpload 版本 
 
 

位置 src/blb.chc02.UpLoad02Servlet

@WebServlet("/UpLoad02Servlet")
public class UpLoad02Servlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("UpLoad02Servlet.doGet");doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("UpLoad02Servlet.doPost");try {//定义一个普通的方法，用于接收请求和响应，作为文件上传的操作upload(req, resp);} catch (Exception e) {e.printStackTrace();}}//自己定义的文件上传的方法，这里可能存在异常，为了让大家看代码更加舒服一点protected void upload(HttpServletRequest req, HttpServletResponse resp) throws Exception {//判断一下，是否是文件上传的表单, 如果不是文件上传的类型，则直接返回if (!ServletFileUpload.isMultipartContent(req)) {return;}//流程: 磁盘工厂 DiskFileItemFactory --> 上传文件对象 ServletFileUpload --> 表单集合 ListDiskFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload load = new ServletFileUpload(factory);List<FileItem> fileItems = load.parseRequest(req);//针对于集合，进行循环遍历for (FileItem item : fileItems) {//判断当前的类型是否是普通文本类型,只有两种类型：1、普通文本，2、文件类型 type="file"if (item.isFormField()) {//如果是普通文本类型，只需要得到键和和值String name = item.getFieldName();String value = item.getString("UTF-8");System.out.println(name + " = " + value);}else{//如果是文件的类型，需要得到文件的名称String name = item.getName();//准备上传的路径，上传文件之后，保存文件的路径String path = req.getServletContext().getRealPath("/");System.out.println("path = " + path);//创建文件的对象File f = new File(path,name);//存放文件item.write(f);}}}
}

第02节 下载操作

1、方案一

要求：

前端页面:可以使用超链接，完成下载的功能。	1、直接在超链接上面添加 download 属性，就可以完成下载。同时还可以指定下载的文件名称2、如果当前的超链接标签，不能被浏览器解析，则直接判定为下载的操作

代码：

位置 web/download/download01.jsp

<%--http://localhost:8080/JavaWebDay21/download/download01.jsp
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>



 超链接完成下载功能 
 展示界面 
如果不能正常解析的文件，则直接判定为下载。
 展示图片  

 展示文本  

 展示压缩包，无法解析则下载  

 展示音乐  
 下载界面 
指定 download属性可以实现下载，如果想要指定名称，则指定download的属性值。
 下载图片  

下载文本  

 下载压缩包  

 下载音乐  

2、方案二

要求：

后端页面:直接响应一段浏览器无法识别的操作，浏览器会自动帮我们下载。可以去设置响应头的信息。1、设置响应头信息:response.setContentType("application/x-msdownload");response.setHeader("Content-Disposition","attachement;filename="+filename);2、采用IO流读写数据FileInputStream is = new FileInputStream("路径或者对象");ServletOutputStream os = response.getOutputStream();

代码：

位置 web/download/download02.jsp

<%--http://localhost:8080/JavaWebDay21/download/download02.jsp
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>



后端代码完成下载功能
文件列表信息如下：
 chui.mp3 
 Demo.zip 
 face.png 
 hello.txt 

位置：src/blb.chc03.DownLoad02Servlet

@WebServlet("/DownLoad02Servlet")
public class DownLoad02Servlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("DownLoad02Servlet.doGet");doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("DownLoad02Servlet.doPost");//可以获取到请求的参数String filename = req.getParameter("filename");//可以获取到资源文件的路径String path = req.getServletContext().getRealPath("/download");//封装成为File对象File f = new File(path,filename);//判断文件如果不存在，则直接返回if (!f.exists()){System.out.println("文件不存在... "+f);return;}//如果文件存在，则响应文件到浏览器当中resp.setContentType("application/x-msdownload");resp.setHeader("Content-Disposition","attachement;filename="+filename);//获取流对象FileInputStream is = new FileInputStream(f);ServletOutputStream os = resp.getOutputStream();//读写操作byte[] array = new byte[1024];int len;while ((len = is.read(array))!=-1){os.write(array,0,len);os.flush();}//释放资源os.close();is.close();}
}

第二章 JQuery

第01节 基础理论

1、概念说明

1. 什么是 JQuery ? 有什么作用呢?JQuery 是一个前端的框架，封装了一堆的 JavaScript 的代码。JQuery 可以实现 "用最少的代码,做最多的事情" 简化 JavaScript 的书写效果。2. 推荐网站https://www.w3school.com.cn/jquery/index.asphttps://jquery.com/

2、快速入门

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery的快速入门title>
head>
<body><div id="divid">嘻嘻，我是div，你是啥?
div>
<hr>

<script src="jquery-3.3.1.min.js">script>
body>
html><script>/*方式1：采用 JavaScript 完成实现，采用ES6版本实现*/let divElement = document.querySelector("#divid");document.write("输出对象:
");document.write(divElement+"
");document.write("输出对象的内容值:
");document.write(divElement.innerHTML+"
");document.write("
");/*方式2：采用JQuery 方式实现*/let divJqElement = $("#divid");document.write("输出对象:
");document.write(divJqElement+"
");document.write("输出对象的内容值:
");document.write(divJqElement.html()+"
");script>

第02节 基础语法

1、对象转换

需求：

现在想要使用彼此的功能，JavaScript 当中，想要去使用 JQuery的功能。例如: html()
又想要在 JQuery 里面去使用 JavaScript 的功能。例如  innerHtml 属性

代码:

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象转换title>
head>
<body><div id="divid">嘻嘻，我是div，你是啥?
div>
<hr>

<script src="jquery-3.3.1.min.js">script>body>
html><script>//1. 把 JavaScript的对象，转换成为 JQuery 的对象let divJs01Element = document.querySelector("#divid");//使用js当中的属性document.write(divJs01Element.innerHTML + "
");//转换成为 JQuerylet divJq01Element = $(divJs01Element);document.write(divJq01Element.html() + "
");document.write("
");//2. 把 JQuery 的对象，转换成为 JavaScript 的对象let divJq02Element = $("#divid");//使用Jq当中的函数document.write(divJq02Element.html() + "
");//转换成为JSlet divJs02Element = divJq02Element[0];document.write(divJs02Element.innerHTML+"
");//转换成为JSlet divJs022Element = divJq02Element.get(0);document.write(divJs022Element.innerHTML+"
");script>

小结

1. JavaScript ---> JQuery:let JQuery的对象 = $(JS的对象);2. JQuery ---> JavaScript方式一：   let  JS的对象 = JQuery的对象[索引值];方式二:    let  JS的对象 = JQuery的对象.get(索引值);

2、事件处理

语法：

1. 事件的使用$("选择器").事件的名称(function(){.....})2. 事件的绑定和解绑A. 绑定事件JQuery的对象.on(事件的名称,执行的功能);B. 解绑事件JQuery的对象.off(事件的名称);3. 事件支持链式调用,例如:$("选择器").事件的名称(function(){.....}).事件的名称(function(){.....});

案例1：点击显示和点击隐藏

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery的事件处理1title>
head>
<body><button id="showbtn">点我展示妹子button>
<button id="hiddenbtn">点我隐藏妹子button><br><hr><img src="../image/meinv01.png" width="320" height="560" id="picid"><script src="jquery-3.3.1.min.js">script>
body>
html><script>//设置点击显示按钮的时候，图片展示$("#showbtn").click(function () {//通过css样式去控制显示$("#picid").css("display","block");});//设置点击隐藏按钮的时候，图片隐藏$("#hiddenbtn").click(function () {//通过css样式去控制隐藏$("#picid").css("display","none");});script>

案例2：事件的绑定和解绑操作

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery的事件处理2title>
head>
<body><button id="showbtn">点我展示妹子button>
<button id="hiddenbtn">点我隐藏妹子button><button id="bindbtn">事件的绑定button>
<button id="unbindbtn">事件的解绑button><br>
<hr><img src="../image/meinv01.png" width="320" height="560" id="picid"><script src="jquery-3.3.1.min.js">script>
body>
html><script>//设置点击显示按钮的时候，图片展示$("#showbtn").click(function () {//通过css样式去控制显示$("#picid").css("display", "block");});//设置点击隐藏按钮的时候，图片隐藏$("#hiddenbtn").click(function () {//通过css样式去控制隐藏$("#picid").css("display", "none");});//设置点击 事件绑定按钮之后，给隐藏按钮 绑定事件。$("#bindbtn").click(function () {//通过css样式去控制显示$("#hiddenbtn").on("click",function () {//通过css样式去控制隐藏$("#picid").css("display", "none");});alert("点击了绑定...");});//设置点击 事件解绑按钮之后，给隐藏按钮 解绑事件。$("#unbindbtn").click(function () {//通过css样式去控制显示$("#hiddenbtn").off("click");alert("点击了解绑...");});script>

案例3：事件的链式调用

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件处理3title>
head>
<body>
<img src="../image/meinv_small.png" id="smallid" width="120" height="160">
<img src="../image/meinv_big.png" id="bigid" width="480" height="640" style="display: none"><script src="jquery-3.3.1.min.js">script>
body>
html><script>$("#smallid").mouseover(function () {//展示大图的效果$("#bigid").css("display","block");}).mouseout(function () {//隐藏大图的效果$("#bigid").css("display","none");});
script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！