课程笔记Day43
- 上传和下载
- JQuery
第一章 上传和下载
第01节 上传操作
1、方案一
要求：
前端页面:
form 表单的要求:
1、提交方式必须是 post 提交。
2、需要指定表单的类型 enctype="multipart/form-data"
3、需要指定 input 标签的 type="file" name="xxx"
后端实现:
Servlet 当中的实现
1、在Servlet当中需要指定注解 @MultipartConfig
2、获取到 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" %>
<html>
<head>
<title>文件上传版本1</title>
</head>
<body>
<h1> 文件上传版本1 - Part 原始版本 </h1>
<form
method="post"
enctype="multipart/form-data"
action="${pageContext.request.contextPath}/UpLoad01Servlet">
<input type="text" name="username" placeholder="普通文本"> <br>
<input type="file" name="upfile" placeholder="选择你需要上传的文件"> <br>
<input type="submit" value="提交数据到服务器">
</form>
</body>
</html>位置： src/blb.chc02.UpLoad01Servlet
/***
* 强调： 这里需要加上注解 @MultipartConfig 表示支持 part提交的方式
*/
@WebServlet("/UpLoad01Servlet")
@MultipartConfig
public class UpLoad01Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("UpLoad01Servlet.doGet");
doPost(req, resp);
}
@Override
protected 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.jar
2、commons-io-2.4.jar
Servlet 当中的实现
1、在Servlet当中操作流程:
A. 磁盘工厂 DiskFileItemFactory
B. 上传文件对象 ServletFileUpload
C. 表单项集合 List<FileItem>
2、对集合进行遍历，获取得到FileItem
A. 判断是否是 普通的文本输入框 fileItem.isFormField()
B. 判断是否不为 普通文本输入框,那么就是 上传的输入框代码：
位置 web/upload/upload02.jsp
<%--
http://localhost:8080/JavaWebDay21/upload/upload02.jsp
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>文件上传版本2</title>
</head>
<body>
<h1> 文件上传版本2 - FileUpload 版本 </h1>
<form
method="post"
enctype="multipart/form-data"
action="${pageContext.request.contextPath}/UpLoad02Servlet">
<input type="text" name="username" placeholder="普通文本"> <br>
<input type="file" name="upfile" placeholder="选择你需要上传的文件"> <br>
<input type="submit" value="提交数据到服务器">
</form>
</body>
</html>位置 src/blb.chc02.UpLoad02Servlet
@WebServlet("/UpLoad02Servlet")
public class UpLoad02Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("UpLoad02Servlet.doGet");
doPost(req, resp);
}
@Override
protected 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 --> 表单集合 List<FileItem>
DiskFileItemFactory 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" %>
<html>
<head>
<title>下载的操作-超链接完成下载</title>
</head>
<body>
<h1> 超链接完成下载功能 </h1>
<h3> 展示界面 </h3>
如果不能正常解析的文件，则直接判定为下载。<br><hr>
<a href="face.png"> 展示图片 </a> <br>
<a href="hello.txt"> 展示文本 </a> <br>
<a href="Demo.zip"> 展示压缩包，无法解析则下载 </a> <br>
<a href="chui.mp3"> 展示音乐 </a> <br>
<h3> 下载界面 </h3>
指定 download属性可以实现下载，如果想要指定名称，则指定download的属性值。<br><hr>
<a href="face.png" download> 下载图片 </a> <br>
<a href="hello.txt" download>下载文本 </a> <br>
<a href="Demo.zip"> 下载压缩包 </a> <br>
<a href="chui.mp3" download="大风吹.mp3"> 下载音乐 </a> <br>
</body>
</html>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" %>
<html>
<head>
<title>采用后端代码完成下载</title>
</head>
<body>
<h1>后端代码完成下载功能</h1>
文件列表信息如下：
<ul>
<li> chui.mp3 </li>
<li> Demo.zip </li>
<li> face.png </li>
<li> hello.txt </li>
</ul>
<form method="get" action="${pageContext.request.contextPath}/DownLoad02Servlet">
<input type="text" name="filename" placeholder="请输入上述的文件名称">
<input type="submit" value="提交则完成下载">
</form>
</body>
</html>位置：src/blb.chc03.DownLoad02Servlet
@WebServlet("/DownLoad02Servlet")
public class DownLoad02Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("DownLoad02Servlet.doGet");
doPost(req,resp);
}
@Override
protected 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、快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery的快速入门</title>
</head>
<body>
<div id="divid">
嘻嘻，我是div，你是啥?
</div>
<hr>
<!-- 引入JQuery代码 -->
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
/*
方式1：采用 JavaScript 完成实现，采用ES6版本实现
*/
let divElement = document.querySelector("#divid");
document.write("输出对象:<br>");
document.write(divElement+"<br>");
document.write("输出对象的内容值:<br>");
document.write(divElement.innerHTML+"<br>");
document.write("<hr>");
/*
方式2：采用JQuery 方式实现
*/
let divJqElement = $("#divid");
document.write("输出对象:<br>");
document.write(divJqElement+"<br>");
document.write("输出对象的内容值:<br>");
document.write(divJqElement.html()+"<br>");
</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>
<!-- 引入JQuery代码 -->
<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 + "<br>");
//转换成为 JQuery
let divJq01Element = $(divJs01Element);
document.write(divJq01Element.html() + "<br>");
document.write("<hr>");
//2. 把 JQuery 的对象，转换成为 JavaScript 的对象
let divJq02Element = $("#divid");
//使用Jq当中的函数
document.write(divJq02Element.html() + "<br>");
//转换成为JS
let divJs02Element = divJq02Element[0];
document.write(divJs02Element.innerHTML+"<br>");
//转换成为JS
let divJs022Element = divJq02Element.get(0);
document.write(divJs022Element.innerHTML+"<br>");
</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的事件处理1</title>
</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的事件处理2</title>
</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>事件处理3</title>
</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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
