JavaWeb

一、Ajax
- 1.1 概念
- 1.2 异步与同步
- 1.3 传统请求与Ajax
- 1.4 异步的使用场景
- 1.4 传输数据类型
- 1.5 Ajax的实现方式
- - 1.5.1 原生的JS实现Ajax(了解)
  - 1.5.2 JQuery方式实现Ajax
- 1.6 案例
二、JSON数据
- 2.1 概述
- 2.2 数据规范
- 2.3 JSON数据和Java对象的相互转换
- - 2.3.1 JSON转为Java对象
  - 2.3.2 Java对象转换JSON
  - 2.3.3 总结
- 2.4 后台封装JSON
- 2.5 前台JSON解析
- 2.6 案例
三、文件上传
- 3.1 概念
- 3.2 使用场景
- 3.3 实现方式
- - 3.3.1 使用jar提供的工具类实现文件上传
  - - 3.3.1.1 DiskFileItemFactory
    - 3.3.1.2 ServletFileUpload
    - 3.3.1.3 FileItem（文件项）
    - 3.3.1.4 单文件上传
    - 3.3.1.5 多文件上传
  - 3.3.2 Servlet 3.0提供的源方式
  - - 3.3.2.1 单文件上传
    - 3.3.2.2 多文件上传
四、文件下载

一、Ajax

1.1 概念

Ajax：Asynchronous JavaScript and XML，异步的JS和xml。客户端与服务器端进行数据交互。

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

1.2 异步与同步

异步：使用XMLHttpRequest对象完成异步操作，和服务器进行数据的交互。
- 不是提交整个页面，而是提交向服务器一部分数据，得到服务器的相应后，做局部刷新；客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作。
同步：使用表单或者超链接提交数据。
- 需要把表单数据提交到后台服务器，页面发生跳转，需要等待服务器作出相应，客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作。

1.3 传统请求与Ajax

1.4 异步的使用场景

1、百度输入框
2、验证用户名收是否存在
3、异步分页
4、实现前后台分离项目(基石)

前后台分离项目：前后台代码存放在不同的服务器，这样既减轻了服务器的压力，也在服务器宕机时还能提供页面展示,只不过没有数据。

1.4 传输数据类型

异步
- 字符串。
- xml：前台得到的是一个document对象。
- JSON：特殊的数据格式，获取的是字符串，需要使用eval函数执行一次，得到JSON对象。
同步
- 响应的都是以整个HTML页面。

1.5 Ajax的实现方式

1.5.1 原生的JS实现Ajax(了解)

             //1.创建核心对象var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}//2. 建立连接/*参数：1. 请求方式：GET、POST* get方式，请求参数在URL后边拼接。send方法为空参* post方式，请求参数在send方法中定义2. 请求的URL：3. 同步或异步请求：true（异步）或 false（同步）*/xmlhttp.open("GET","ajaxServlet?username=tom",true);//3.发送请求xmlhttp.send();//4.接受并处理来自服务器的响应结果//获取方式 ：xmlhttp.responseText//什么时候获取？当服务器响应成功后再获取//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。xmlhttp.onreadystatechange=function(){//判断readyState就绪状态是否为4，判断status响应状态码是否为200if (xmlhttp.readyState==4 && xmlhttp.status==200){//获取服务器的响应结果var responseText = xmlhttp.responseText;alert(responseText);}}

1.5.2 JQuery方式实现Ajax

JS中使用XMLHttpRequest进行异步请求的发送，JQuery是JS的库，对JS的操作进行一步封装，提供了Ajax这种异步请求方式。

方法名	参数分析	备注
`load(url,data,callback)`	url:访问的服务器的地址 data:以key:value形式发送数据(json数据) callback:回调函数,服务器相应成功了,该函数就会执行默认使用get请求方式,传递附加参数时自动转换为post请求	默认使用get请求方式,传递附加参数时自动转换为post请求
`$.get(url,data,callback,type)`	url:请求的路径 data:发送的数据(json) callback:回调函数:当服务器成功返回时调用的函数 type:返回内容的格式,xml,html,script,json,text,_default
`$.post(url,data,callback,type)`	参数解析同上
`$.ajax(url,[settings])`	url:请求的路径 setting:配置

$.ajax()
语法：.ajax(键值对);//使用.ajax({键值对}); //使用.ajax(键值对);//使用.ajax()发送异步请求
$.ajax({
url:“ajaxServlet1111” , // 请求路径
type:“POST” , //请求方式
//data: “username=jack&age=23”,//请求参数
data:{“username”:“jack”,“age”:23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert(“出错啦…”)
},//表示如果请求响应出现错误，会执行的回调函数
```
              dataType:"text"//设置接受到的响应数据的格式});
```
$.get()：发送get请求
* 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
$.post()：发送post请求
* 语法：$.post(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入jquery  因为ajax是jquery提供的异步请求方法  --><script src="jquery-3.6.0.min.js"></script><script>$(function() {$("button:eq(0)").click(function() {// $.get(url,data,callback,type)//url 请求的服务器地址//data 请求携带的参数//callback 当前服务器执行成功时的回调函数//type 请求与响应数据的格式(注意格式不符会出错)//使用ajax发送get请求$.get("ajax", {"username": "zhangsan"}, function(res) {//result 就是一个变量 保存返回的数据$("button:eq(0)").html(res)}, "text")})$("button:eq(1)").click(function() {//$.post(url,data,callback,type)$.post("ajax", {"username": "zhangsan"}, function(res) {//result 就是一个变量 保存返回的数据$("button:eq(1)").html(res)}, "text")})$("button:eq(2)").click(function() {//$.ajax({url,settings})//是通用方法 可以通过参数的形式 修改请求的相应配置  //通过json形式进行配置设置$.ajax({"type": "post", //post 定义请求方式"url": "ajax","data": {"username": "ajax"},"dataType": "text","success": function(data) {alert(data);},"error": function() {alert("出错了")}})})})</script>
</head><body><button>get</button><button>post</button><button>ajax</button>
</body></html>

1.6 案例

使用Ajax完成注册页面验证账号是否存在判断

RegServlet.java

@WebServlet("/reg")
public class RegServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=utf-8"); //书写账号是否存在验证//获取要注册的账号String username = request.getParameter("username");//书写判断sqlString sql="select * from account where username=?";ArrayList<Account> accounts = MyJDBCutil.dql(sql, Account.class, username);//获取打印流PrintWriter writer = response.getWriter();    if(accounts.isEmpty()){writer.print("账号可以使用");}else{writer.print("账号已经被注册");}}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//post用于真正的注册功能使用}}

reg.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title><!-- 引入jquery  因为ajax是jquery提供的异步请求方法  --><script src="jquery-3.6.0.min.js"></script><script>$(function() {$("#username").blur(function() {//发送ajax get请求var value = $(this).val()$.get("reg", {"username": value}, function(data) {$("#s1").html(data);}, "text")})})</script>
</head><body><form action="login" method="post">账号:<input type="text" name="username" id="username"><span id="s1"></span><br> 密码:<input type="password" name="password"><br> <input type="submit" value="注册"></form>
</body></html>

二、JSON数据

2.1 概述

JS提供的一种数据交换的格式，一般情况，都是再后台拼接JSON数据，响应前台，前台使用JS代码就可以方便操作JSON。

当前台请求设置dataType为JSON时，会自动将服务返回的数据转换为JSON对象，如果在转换时失败，则会出现明明服务执行但仍然调用失败方法回调。

2.2 数据规范

定义JSON数据

格式必须使用{}包括起来，当做对象来使用，对象包含属性和值，如果是属性，必须使用双引号括起来，属性与值之间使用冒号，属性与属性之间使用逗号。

数据在名称/值对中：json数据是由键值对构成的
* 键用引号(单双都行)引起来，也可以不使用引号
* 值得取值类型：
1. 数字（整数或浮点数）
2. 字符串（在双引号中）
3. 逻辑值（true 或 false）
4. 数组（在方括号中） {“persons”:[{},{}]}
5. 对象（在花括号中） {“address”:{“province”：“陕西”…}}
6. null

获取JSON数据的方式

对象名.属性名
1. json对象.键名
2. json对象[“键名”]
3. 数组对象[索引]
4. 遍历

 var person = {}

JSON本质是字符串，后台可以通过字符串拼接的形式进行JSON字符串的创建并返回，但是由于JSON的key必须为字符串(" "包裹)所以需要使用转义符 \ 进行标注。

<script type="text/javascript">// 定义json数据格式的数据var person = {"name":"张三","age":18};// 使用对象.属性 获取值alert(person.name);alert(person.age);// 还可以定义数组这种格式的数据var person2 = [{"name":"赵四","age":19},{"name":"王五","age":20}];// 解析数据alert(person2[0].name);alert(person2[1].name);var person3 = {"stu":[{"name":"老六","age":21}]};alert(person3.stu[0].name);//获取person2中所有的键和值for (var i = 0; i < person2.length; i++) {var p = person2[i];for(var key in p){alert(key+":"+p[key]);}}
</script>

             $.ajax({"type": "get", //post 定义请求方式"url": "json","data": {"username": "ajax"},"dataType": "json","success": function(data) {alert(data.msg);},"error": function() {alert("出错了")}})

     String jsonStr="{\"msg\":\"请求成功\"}";writer.print(jsonStr);

常用的使用方式：从后台发送JSON数据格式的数据,再前台使用JS解析数据

2.3 JSON数据和Java对象的相互转换

JSON解析器：

常见的解析器：Jsonlib，Gson，fastjson，jackson

2.3.1 JSON转为Java对象

导入jackson的相关jar包
创建Jackson核心对象 ObjectMapper
调用ObjectMapper的相关方法进行转换。readValue(json字符串数据,Class)

2.3.2 Java对象转换JSON

使用步骤：
1、导入jackson的相关jar包
2、创建Jackson核心对象 ObjectMapper
3、调用ObjectMapper的相关方法进行转换
- 转换方法：
  - 1、writeValue(参数1，obj)
    - 参数1：
      File：将obj对象转换为JSON字符串，并保存到指定的文件中
      Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
      OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
    - writeValueAsString(obj)：将对象转为json字符串
  - 2、注解
    - @JsonIgnore：排除属性。
    - @JsonFormat：属性值得格式化
    - @JsonFormat(pattern = "yyyy-MM-dd")
  - 3、复杂java对象转换
    - List：数组
    - Map：对象格式一致

     String sql="select * from account";ArrayList<Account> accounts = MyJDBCutil.dql(sql, Account.class);//JSONArray 可以将集合转换为json数组//fromObject JSONArray提供的静态方法 可以将集合数组转换为对应的json数组JSONArray jsonArr = JSONArray.fromObject(accounts);Account account=new Account(1,"zhangsan","123456");//JSONObject 在java中代表json对象的类 提供了操作json数据的方法//fromObject JSONObject提供的静态方法  可以将对象转换为json对象//可以创建返回json数据对象 通常拥有属性int code,String msg,list dataJSONObject accjson = JSONObject.fromObject(account);//System.out.println(accjson);//也可以通过自己创建json对象 并进行数据存储返回//创建一个空的json对象  并自己进行赋值操作JSONObject jsonObj=new JSONObject();//为当前json对象添加对应数据(如果已存储指定key则覆盖)jsonObj.element("code", "200");jsonObj.element("code", "201");//为当前json对象添加对相应数据(如果存在指定key 将value已数组形式继续添加)jsonObj.accumulate("msg","错误信息");jsonObj.accumulate("msg","错误信息1");System.out.println(jsonObj);

2.3.3 总结

JSONObject(类似与map集合,对象)
- 无参构造方法：创建空的json对象
- element(k,v)：添加对应数据key相同进行覆盖
- accumulate(k,v)：添加对应数据 key相同,value使用数据继续添加
- fromObject(对象)：将对象转为json字符串
- put(key,value)：在json对象中放入键值对
JSONArray(类似于list,数组集合)
- add(对象)：将对象放入json数组

2.4 后台封装JSON

通常后台通过数据库查询数据返回集合，但是如果通过JSON数据传输，那么需要将集合转换为JSON字符串，我们不可能逐个拼接，所以我们使用工具类完成。

@Testpublic void run1(){JSONObject j = new JSONObject();j.put("username", "张三");j.put("age", 18);System.out.println(j.toString());}/*** var p = {"user":{"age":19,"username":"赵四"}}*  p.user.username*/@Testpublic void run2(){JSONObject j = new JSONObject();User user = new User();user.setUsername("赵四");user.setAge(19);j.put("user", user);System.out.println(j.toString());}/*** var p = {"age":19,"username":"赵四"}* p.age*/@Testpublic void run3(){User user = new User();user.setUsername("赵四");user.setAge(19);JSONObject j = JSONObject.fromObject(user);System.out.println(j.toString());}/*** var p = [{"age":19,"username":"赵四"}]* p[0].age*/@Testpublic void run4(){User user = new User();user.setUsername("赵四");user.setAge(19);JSONArray j = new JSONArray();j.add(user);System.out.println(j.toString());}

2.5 前台JSON解析

Ajax会将后台返回的JSON字符串解析为JSON对象，可以使用接受参数直接获取通过key进行操作。

使用eval函数，全局函数，并且执行的时候拼接小括号。

 var result = 接受响应的数据;// 必须要使用eval的全局函数先执行一次，返回json的对象
var p = eval("("+result+")");// 想获取到tom的值
alert(p.name);
alert(p.age);

2.6 案例

查询数据库，根据返回JSON数据生成页面表格。

json.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title><!-- 引入jquery  因为ajax是jquery提供的异步请求方法  --><script src="jquery-3.6.0.min.js"></script><script>$(function() {$.ajax({"type": "get", //post 定义请求方式"url": "json","data": {"username": "ajax"},"dataType": "json","success": function(data) {if (data.code == 200) {var dataArr = data.data;for (var i = 0; i < dataArr.length; i++) {$("tbody").append("<tr><td>" + dataArr[i].id + "</td><td>" + dataArr[i].username + "</td><td>" + dataArr[i].password + "</td></tr>")}} else {alert(data.msg)}}})})</script>
</head><body><table border="1"><thead id="th1"><tr><th>id</th><th>账号</th><th>密码</th></tr></thead><tbody></tbody></table></body></html>

JsonServlet.java

@WebServlet("/json")
public class JsonServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=utf-8");// 服务器返回json数据本质返回的是json字符串// 在后台拼接json字符串并返回System.out.println("jsonServlet执行");PrintWriter writer = response.getWriter();String sql = "select * from account";ArrayList<Account> accounts = MyJDBCutil.dql(sql, Account.class);JSONObject jsonObj = new JSONObject();jsonObj.element("code", 200);jsonObj.element("msg", "请求成功");jsonObj.element("data", accounts);writer.print(jsonObj);}
}

三、文件上传

3.1 概念

文件上传：就是将本地的文件保存到服务器端。

3.2 使用场景

个人信息头像上传
网络保存传输文件

3.3 实现方式

1、基于根据jar包的形式
2、Servlet 3.0 提供的形式

3.3.1 使用jar提供的工具类实现文件上传

文件上传基于form表单实现，就是在一个form中提交相应的信息，和之前我们的提交的注册信息之类的表单是不同的，所以要先改变一下form的属性，enctype="multipart/form-data“，这个属性告诉服务器，我们是要提交文件了，而不是一个表单。将文件对应的内容以二进制的形式传递给后台。<input type="file" />这是表单中用来选择上传文件用的，在表单中有这个元素后，会自动生成一个输入框和一个按钮。

导入jar包
- commons-fileupload-1.2.1.jar
- commons-io-1.4.jar

3.3.1.1 DiskFileItemFactory

DiskFileItemFactory：磁盘文件项工厂，用来生产FileItem对象。

通过构造方法创建DiskFileItemFactory对象。

3.3.1.2 ServletFileUpload

ServletFileUpload：代表文件上传的类，用来解析request请求。

方法：
- parseRequest：解析request请求。
- setHeaderEncoding：设置中文乱码(文件名中文乱码)。
- setSizeMax：设置上传文件的总大小。

3.3.1.3 FileItem（文件项）

FileItem：代表文件项（普通的表单项(文本框，单选…)，文件的上传项）。

方法：

方法名	作用
isFormField	判断文件项是普通项还是文件上传项
getFieldName	获取表单name属性值
getString	获取该表单项的用户输入的值
getString（String encoding）	获取用户输入的值，解决中文乱码
getName	获取上传的文件名（setHeaderEncoding解决中文乱码）
getInputStream	获取文件的输入流
write	直接写出文件
delete	删除临时文件（需要在流关闭后删除）

3.3.1.4 单文件上传

上传页面 upload.html

通过form表单进行文件上传，需要在form表单中设置enctype="multipart/form-data" 并且将提交方式设置为post。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h3>单文件上传</h3>
<form action="upload" method="post" enctype="multipart/form-data">姓名: <input type="text" name="uname"> <br>文件: <input type="file" name="ufile"> <br><input type="submit" value="提交">
</form>
</body>
</html>

接受上传的servlet服务文件相应doPost方法 UploadServlet

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.*;
import java.util.HashMap;
import java.util.List;
import java.util.UUID;@WebServlet(name = "UploadServlet", value = "/upload")
public class UploadServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//使用FileItem工场类创建相应工场对象FileItemFactory factory = new DiskFileItemFactory();//创建servlet文件上传对象并将指定工场对象传入ServletFileUpload fileUpload = new ServletFileUpload(factory);//声明文件集合List<FileItem> parseRequest = null;//声明其他数据保存的map集合HashMap<String, String> map = new HashMap<>();try {//使用servlet文件上传对象解析请求返回文件集合parseRequest = fileUpload.parseRequest(request);// 遍历文件对象集合   获取数据for (FileItem fileItem : parseRequest) {// 判断数据类型是不是普通的form表单字段if (!fileItem.isFormField()) {// 获取上传文件的文件名String fileName = fileItem.getName();//使用上传文件创建输入流InputStream fileStream = fileItem.getInputStream();// 使用UUID+文件名的方式生成保存文件的名称，避免文件重名String realFileName = UUID.randomUUID().toString() + "-" + fileName;// 定义保存的父路径File fileFatherPath = new File("E://Upload");//创建父路径 避免路径不存在保错fileFatherPath.mkdirs();// 创建要保存的文件File file = new File(fileFatherPath, realFileName);// 创建输出流OutputStream out = new FileOutputStream(file);// 创建字节缓存byte[] buffer = new byte[1024];int len = -1;// 一次读取1kb(1024byte),返回-1表明读取完毕while ((len = fileStream.read(buffer)) != -1) {// 一次写入1kb(1024byte)out.write(buffer, 0, len);}// 冲刷流资源out.flush();// 关闭流out.close();fileStream.close();} else {//如果是普通字段获取name与value存储至map集合中map.put(fileItem.getFieldName(), fileItem.getString());}}} catch (Exception e) {e.printStackTrace();}finally {request.getRequestDispatcher("upload.html").forward(request, response);}}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request,response);}
}

3.3.1.5 多文件上传

多文件上传只需要在input处添加multiple="multiple"属性设置file可以选择上传多个文件。

上传页面 upload.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>多文件上传</h3>
<form action="upload" method="post" enctype="multipart/form-data">姓名: <input type="text" name="uname"> <br>文件: <input type="file" name="ufile" multiple="multiple"> <br><input type="submit" value="提交">
</form>
</body>
</html>

接受上传的servlet服务文件相应doPost方法 UploadServlet.java

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.*;
import java.util.HashMap;
import java.util.List;
import java.util.UUID;@WebServlet(name = "UploadServlet", value = "/upload")
public class UploadServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//使用FileItem工场类创建相应工场对象FileItemFactory factory = new DiskFileItemFactory();//创建servlet文件上传对象并将指定工场对象传入ServletFileUpload fileUpload = new ServletFileUpload(factory);//声明文件集合List<FileItem> parseRequest = null;//声明其他数据保存的map集合HashMap<String, String> map = new HashMap<>();try {//使用servlet文件上传对象解析请求返回文件集合parseRequest = fileUpload.parseRequest(request);// 遍历文件对象集合   获取数据for (FileItem fileItem : parseRequest) {// 判断数据类型是不是普通的form表单字段if (!fileItem.isFormField()) {// 获取上传文件的文件名String fileName = fileItem.getName();//使用上传文件创建输入流InputStream fileStream = fileItem.getInputStream();// 使用UUID+文件名的方式生成保存文件的名称，避免文件重名String realFileName = UUID.randomUUID().toString() + "-" + fileName;// 定义保存的父路径File fileFatherPath = new File("E://Upload");//创建父路径 避免路径不存在保错fileFatherPath.mkdirs();// 创建要保存的文件File file = new File(fileFatherPath, realFileName);// 创建输出流OutputStream out = new FileOutputStream(file);// 创建字节缓存byte[] buffer = new byte[1024];int len = -1;// 一次读取1kb(1024byte),返回-1表明读取完毕while ((len = fileStream.read(buffer)) != -1) {// 一次写入1kb(1024byte)out.write(buffer, 0, len);}// 冲刷流资源out.flush();// 关闭流out.close();fileStream.close();} else {//如果是普通字段获取name与value存储至map集合中map.put(fileItem.getFieldName(), fileItem.getString());}}} catch (Exception e) {e.printStackTrace();}finally {request.getRequestDispatcher("upload.html").forward(request, response);}}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request,response);}
}

3.3.2 Servlet 3.0提供的源方式

Servlet 3.0提供的源方式的文件上传无需第三方jar包，但页面请求方式以及请求数据格式相同。

Part：主要工具类，从前台获取的上传文件内容流存储位置Servlet 3.0将multipart/form-data的POST请求封装成Part，通过Part对上传的文件进行操作，之后再part对象中获取输入流之后通过流操作保存数据。

Servlet是通过使用@MultipartConfig注解来完成文件的上传（用来标志当前Servlet是处理文件上传的Servlet）。

3.3.2.1 单文件上传

上传页面 upload.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h3>单文件上传</h3>
<form action="upload" method="post" enctype="multipart/form-data">姓名: <input type="text" name="username"> <br>密码: <input type="password" name="password"> <br>文件: <input type="file" name="fileImg"> <br><input type="submit" value="提交资料">
</form>
</body>
</html>

接受上传的servlet服务文件相应doPost方法 UploadServlet.java

import org.apache.commons.io.IOUtils;import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;@WebServlet(name = "UploadServlet", value = "/upload")
@MultipartConfig
//用于标识当前servel处理文件上传 如果没有书写 那么不会处理文件上传
public class UploadServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request,response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//对于表单的其他属性 可以使用原本的方式获取String username = request.getParameter("username");String password = request.getParameter("password");System.out.println("username" + username);System.out.println("password" + password);//Part对象 代表客户端发送的文件对象//通过请求对象对应方法   获取指定name对应上传的文件对象Part fileImg = request.getPart("fileImg");//Servlet3.0将multipart/form-data的POST请求封装成Part，通过Part对上传的文件进行操作。//Servlet3没有提供直接获取文件名的方法,需要从请求头中解析出来//获取请求头，请求头的格式：form-data; name="file"; filename="snmp4j--api.zip"String disposition = fileImg.getHeader("Content-Disposition");System.out.println("disposition:" + disposition);//从请求头中获取文件后缀String suffix = disposition.substring(disposition.lastIndexOf("."), disposition.length() - 1);//使用UUID生成随机文件名String fileName = UUID.randomUUID().toString() + suffix;//创建保存文件的对象eFile file = new File("E://upload", fileName);System.out.println("文件保存位置:" + file);//获取上传文件输入流InputStream is = fileImg.getInputStream();//获取保存文件的输出流FileOutputStream fos = new FileOutputStream(file);//使用IOUtils进行文件复制IOUtils.copy(is, fos);request.getRequestDispatcher("upload.html").forward(request, response);}
}

3.3.2.2 多文件上传

多文件上传的方式是通过修改获取part方法的形式实现的

     Collection<Part> parts = request.getParts();for (Part p : parts) {.....}

上传页面 upload.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多文件上传</title>
</head>
<body>
<form action="upload" method="post" enctype="multipart/form-data">
姓名：<input type="text" name="username"> <br>
文件：<input type="file" name="fileImg" multiple="multiple" > <br><input type="submit" value="上传">
</form>
</body>
</html>

接受上传的servlet服务文件相应doPost方法 UploadServlet.java

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Collection;
import java.util.UUID;import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;import org.apache.commons.io.IOUtils;@WebServlet("/upload")
@MultipartConfig
public class UploadServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.getRequestDispatcher("/note.html").forward(request, response);}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 对于表单的其他属性 可以使用原本的方式获取String username = request.getParameter("username");String password = request.getParameter("password");System.out.println("username" + username);System.out.println("password" + password);// Part对象 代表客户端发送的文件对象// 通过请求对象对应方法 获取指定name对应上传的文件对象// Part fileImg = request.getPart("fileImg");Collection<Part> parts = request.getParts();for (Part fileImg : parts) {System.out.println(fileImg);if(fileImg.getName().startsWith("fileImg")){//Servlet3.0将multipart/form-data的POST请求封装成Part，通过Part对上传的文件进行操作。//Servlet3没有提供直接获取文件名的方法,需要从请求头中解析出来//获取请求头，请求头的格式：form-data; name="file"; filename="snmp4j--api.zip"String disposition = fileImg.getHeader("Content-Disposition");System.out.println("disposition:" + disposition);//从请求头中获取文件后缀String suffix = disposition.substring(disposition.lastIndexOf("."), disposition.length() - 1);//使用UUID生成随机文件名String fileName = UUID.randomUUID().toString() + suffix;//创建保存文件的对象eFile file = new File("E://upload", fileName);System.out.println("文件保存位置:" + file);//获取上传文件输入流InputStream is = fileImg.getInputStream();//获取保存文件的输出流FileOutputStream fos = new FileOutputStream(file);//使用IOUtils进行文件复制IOUtils.copy(is, fos);}}request.getRequestDispatcher("/note.html").forward(request, response);}}

四、文件下载

文件下载就是在响应中设置响应类型之后，以流的形式将文件发送至客户端。

文件下载，需要先给下载的文件夹设置虚拟路径。
1、IDEA：在Run / Debug Configurations —> Tomcat Server —> Deployment，点 + 填加需要下载的文件夹，添加完成在下方Application context，设置虚拟路径。
2、Eclipse：双击Servers中的Tomcat服务器，选择Modules，在Web Modules页面表格中Add Exteral Web Modules，弹出Add WebModules框，Document base栏Browse选择需要下载的文件夹，Path栏填虚拟路径，填写完成OK。

LoadServlet.java

@WebServlet("/load")
public class LoadServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//创建下载的文件对象File file=new File("E:/upload/a.mp4");ServletOutputStream os = response.getOutputStream();//获取文件的输入流FileInputStream fis=new FileInputStream(file);BufferedInputStream bis=new BufferedInputStream(fis);byte[] b=new byte[1024];int len=0;//如果只是将数据以流的形式输出 浏览器会直接进行显示 不会下载//需要在响应中添加指定的头信息 代表进行下载response.setHeader("content-disposition", "attachment;filename="+URLEncoder.encode(file.getName(), "UTF-8"));response.setHeader("Content-Length", ""+file.length());while((len=bis.read(b))!=-1){os.write(b, 0, len);}bis.close();os.flush();os.close();  }
}

案例：

将E://Upload文件夹中的文件以表格形式(文件名、下载)加载到页面上，点击下载，下载对应的文件。

load.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><style>img{width: 200px;height: 100px;}</style>
</head>
<body>
<table border="1"><thead><tr><th>文件名</th><th>操作</th></tr></thead><tbody><c:forEach items="${FileList}" var="name" varStatus="status"><tr><td>${status.count}</td><td>${name}</td><td><a href="load?name=/${name}">下载</a></td></tr></c:forEach></tbody>
</table>
<c:forEach items="${FileList}" var="name" varStatus="status"><div><a href="load?name=/${name}"><img src="/Upload/${name}"><br></a></div>
</c:forEach>
</body>
</html>

GoLoadServlet.java

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;@WebServlet("/goLoad")
public class GoLoadServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {File file = new File("E://Upload");File[] files = file.listFiles();ArrayList<String> list = new ArrayList<>();for(File f:files){if(f.isFile()){list.add(f.getName());}}request.setAttribute("FileList",list);request.getRequestDispatcher("load.jsp").forward(request,response);}
}

LoadServlet.java

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.net.URLEncoder;@WebServlet("/load")
public class LoadServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String name = request.getParameter("name");File file = new File("E://Upload", name);ServletOutputStream os = response.getOutputStream();FileInputStream fis = new FileInputStream(file);BufferedInputStream bis = new BufferedInputStream(fis);byte[] b = new byte[1024];int len = 0;response.setHeader("content-disposition", "attachment;filename=" + URLEncoder.encode(file.getName(), "UTF-8"));response.setHeader("Content-Length", "" + file.length());while ((len = bis.read(b)) != -1) {os.write(b, 0, len);}bis.close();os.flush();os.close();}
}

每日一点点进步
不进则退

Ajax、JSON数据和文件上传与下载相关推荐

springmvc代码详细(五种映射，绑定参数，处理json数据，文件上传，转发，拦截器的实现)
项目结构图: 父工程的pom.xml文件: <properties><junit.version>4.10</junit. ...
小汤学编程之JavaEE学习day05——会话管理、文件上传与下载、Ajax
一.会话管理 1.HTTP协议 2.会话的概念 3.会话跟踪技术 4.会话跟踪技术分类(四种) 二.文件上传与下载 1.上传 2.下载 3.上传和下载合并优化成 ...
SSM之SpringMVC 04 —— Ajax、拦截器、文件上传和下载
系列文章 SSM之SpringMVC 01 -- SpringMVC原理及概念.Hello SpringMVC 注解版和配置版 SSM之SpringMVC 02 -- Controller和RestF ...
layui上传文件请求接口异常_SpringMVC实现文件上传与下载，拦截器，异常处理
第一章:响应数据和结果视图 1. 返回字符串 Controller方法返回字符串可以指定逻辑视图的名称,根据视图解析器为物理视图的地址. @RequestMapping(value="/he ...
springboot文件上传、下载使用ftp工具将文件上传至服务器
springboot文件上传.下载使用ftp工具首先在服务器搭建ftp服务配置文件(在application.properties中) # Single file max size multipa ...
PHP实现文件上传和下载超完整实例源码(详解)
1.效果图 2.首先是封装好的图片类(缩放及生成水印) (1)GDBasic.php <?php/** * GDBasic.php * description GD基础类 */ namespac ...
Angular 文件上传与下载
Angular文件上传与下载文件上传方式1 使用NG ZORRO中的组件. 文件下载方式1 直接下载方式2 通过HTTP请求后端数据的方式进行下载文件上传方式1 使用NG ZORRO中的组 ...
SpringBoot整合阿里云OSS文件上传、下载、查看、删除
SpringBoot整合阿里云OSS文件上传.下载.查看.删除该项目源码地址:https://github.com/ggb2312/springboot-integration-examples ( ...
JavaWeb:实现文件上传与下载
JavaWeb:实现文件上传与下载文件上传前端处理本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传上传文件就是把客户端的文件发送给服务器端. 在常见情况(不包含文 ...

Ajax、JSON数据和文件上传与下载