随着我们互联网的发展,我们的用户从直接访问网站获取信息。变为希望将自己本地的资源发送给服务器,让服务器提供给其他人使用或者查看。还有部分的用户希望可以将本地的资源上传服务器存储起来,然后再其他的电脑中可以通过访问网站来获取上传的资源,这样用户就可以打破空间的局限性,再任何时候只要有网有电脑就可以对自己的资源进行操作,比如:云存储,云编辑
1、如何在页面中显示一个按钮
用户可以点击该按钮后选择本地要上传的文件在页面中使用input标签,type值设置为”file”即可
2、确定上传请求的发送方式
上传成功后的响应结果在当前页面显示,使用ajax请求来完成资源的发送
3、上传请求的请求数据及其数据格式
请求数据:
上传的文件本身普通数据:用户名,Id,密码等,建议上传功能中不携带除上传资源以外的数据
数据格式:
传统的请求中,请求数据是以键值对的格式来发送给后台服务器的,但是在上传请求中,没有任何一个键可以描述上次的数据,因为数据本身是非常大的键就相当于一个变量,我们使用一个变量存储一个10g的电影显然是不可能 的。在上传请求中,将请求数据以二进制流的方式发送给服务器。
4、在ajax中如何发送二进制流数据给服务器
① 创建FormData的对象,将请求数据存储到该对象中发送
② 将processData属性的值设置为false,告诉浏览器发送对象请求数据
③ 将contentType属性的值设置为false,设置请求数据的类型为二进制类型。
④ 正常发送ajax即可
5、上传成功后后台服务器应该响应什么结果给浏览器
并且浏览器如何处理后台服务器处理完成后,响应一个json对象给浏览器,示例格式如下:
{ state:true,msg:“服务器繁忙”,url:”上传成功的资源的请求地址”}
6、 文件上传依赖的jar
<!--文件上传依赖-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.8.0</version>
</dependency>
7、在springmvc.xml中 配置文件上传组件
<!--文件上传解析组件
id必须为multipartResolver
springmvc默认使用该id找该组件
文件上传的value=1024*1024*2=2097152
-->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--<property name="maxUploadSize" value="2097152"></property>-->
</bean>
项目前端页面效果展现
1、文件的上传
1、准备用户表
项目结构
2、接下来准备配置文件(重要!!!)
(1)导入依赖jar
<!--文件上传依赖-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.8.0</version>
</dependency>
<!--跨服务文件上传依赖-->
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-client</artifactId>
<version>1.19</version>
</dependency>
(1)log4j2.xml
<?xml version="1.0" encoding="UTF-8"?>
<Configuration status="INFO">
<Appenders>
<Console name="Console" target="SYSTEM_ERR">
<PatternLayout pattern="%d{YYYY-MM-dd HH:mm:ss} [%t] %-5p %c{1}:%L - %msg%n" />
</Console>
</Appenders>
<Loggers>
<Root level="INFO">
<AppenderRef ref="Console" />
</Root>
</Loggers>
</Configuration>
(2)jdbc.properties
jdbc_driver=com.mysql.cj.jdbc.Driver
jdbc_url=jdbc:mysql://127.0.0.1:3306/mydb?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
jdbc_username=root
jdbc_password=root
(3)springmvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:c="http://www.springframework.org/schema/c"
xmlns:util="http://www.springframework.org/schema/util"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/util
http://www.springframework.org/schema/util/spring-util.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
">
<!--扫描controller-->
<context:component-scan base-package="com.wml.controller"></context:component-scan>
<!--
这里配置三大组件
处理器映射器
处理器适配器
视图解析器
-->
<mvc:annotation-driven />
<!--视图解析器-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
</bean>
<!--配置静态资源放行-->
<mvc:resources mapping="/js/**" location="/js/"></mvc:resources>
<mvc:resources mapping="/upload/**" location="/upload/"></mvc:resources>
<!--<mvc:resources mapping="/html/**" location="/html/"></mvc:resources>-->
<!--<mvc:resources mapping="/css/**" location="/css/"></mvc:resources>-->
<!--<mvc:resources mapping="/img/**" location="/img/"></mvc:resources>-->
<!--<mvc:resources mapping="/static/**" location="/static/"></mvc:resources>-->
<!--文件上传解析组件
id必须为multipartResolver
springmvc默认使用该id找该组件
文件上传的value=1024*1024*2=2097152
-->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--<property name="maxUploadSize" value="2097152"></property>-->
</bean>
</beans>
(4)applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:c="http://www.springframework.org/schema/c"
xmlns:util="http://www.springframework.org/schema/util"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/util
http://www.springframework.org/schema/util/spring-util.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
">
<!--1、加载propertise配置文件-->
<context:property-placeholder location="classpath:jdbc.properties"/>
<!--2、包扫描 仅仅扫描service层-->
<context:component-scan base-package="com.wml.service"/>
<!--3、配置德鲁伊连接池(数据源)-->
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
<!--四要素-->
<property name="driverClassName" value="${jdbc_driver}"></property>
<property name="url" value="${jdbc_url}"></property>
<property name="username" value="${jdbc_username}"></property>
<property name="password" value="${jdbc_password}"></property>
</bean>
<!--4、SqlSessionFactoryBean-->
<bean name="factory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--配置数据源 name:属性名 ref:德鲁伊连接池ID-->
<property name="dataSource" ref="dataSource"></property>
<!--实体类别名包扫描-->
<property name="typeAliasesPackage" value="com.wml.pojo"></property>
</bean>
<!--5、sqlSession获取***Mapper-->
<!--MapperScanner mapper扫描仪 生成所有Mapper对象并放入容器中-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!--配置SQLSessionFactory 注入factory-->
<property name="sqlSessionFactoryBeanName" value="factory"></property>
<!--扫描所有的mapper接口和映射文件-->
<property name="basePackage" value="com.wml.mapper"></property>
</bean>
<!--出错位置1:将transactionManager写成transactionMapping-->
<!--6、事务管理器-->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"></property>
</bean>
<!--开启事务注解-->
<tx:annotation-driven transaction-manager="transactionManager"></tx:annotation-driven>
</beans>
(5)web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!-- 1.配置前端控制器DispatcherServlet -->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--两个初始化参数:(1)-->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 2.配置:防止乱码的过滤器CharacterEncodingFilter -->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<!--初识化参数:(2)-->
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 3.向ServletContext中添加Spring核心配置文件的位置 (希望项目启动的时候,立刻加载ApplicationContext-*.xml配置文件,在Application应用对象的初始化参数里加载)-->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 4,spring核心容器配置 配置监听器,监听bean对象的创建 -->
<!--通过监听器,监听JAVAWEB项目中的ServletContext创建的时候,就创建一个spring的容器,并放入ServletContext对象中-->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
</web-app>
3、index.jsp(保存完整player信息进入数据库)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<%--进度条样式--%>
<style>
.progress {
width: 200px;
height: 10px;
border: 1px solid #ccc;
border-radius: 10px;<%--角弧度--%>
margin: 10px 0px;
overflow: hidden;
}
/* 初始状态设置进度条宽度为0px */
.progress > div {
width: 0px;
height: 100%;
background-color: yellowgreen;
transition: all .3s ease;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" >
//页面加载函数
$(function(){
//获取a标签
$("#uploadFile").click(function(){
/*alert("上传文件")*/
//1、获取上传文件
/*console.log($("#photo")[0].files[0])*/
//用一个对象接受文件
var photoFile = $("#photo")[0].files[0]
if(photoFile == undefined){
alert("你还未选中文件")
return;
}
/*alert("文件可以上传")*/
//将文件装入FormData对象
var formdata = new FormData();
formdata.append("headPhoto",photoFile)
//2、通过Ajax向后台发送文件
/*在ajax中如何发送二进制流数据给服务器
1 创建FormData的对象,将请求数据存储到该对象中发送
2 将processData属性的值设置为false,告诉浏览器发送对象请求数据
3 将contentType属性的值设置为false,设置请求数据的类型为二进制类型。
4 正常发送ajax即可*/
$.ajax({
type:"post",
data:formdata,
url:"fileUpload2.do",
processData:false,
contentType:false,
/*定义响应成功之后的方法*/
success:function(result){
//3、接受后台响应的信息
//console.log(result)
alert(result.message)
//4、图片回显
/*$("#headImg").attr("src",result.newFileName);*/
$("#headImg").attr("src","http://192.168.1.6:8090/upload/"+result.newFileName);
//将文件类型和文件名放入form表单
$("#photoInput").val(result.newFileName);
$("#filetypeInput").val(result.filetype);
},
/*监听进度条*/
xhr: function() {
var xhr = new XMLHttpRequest();
//使用XMLHttpRequest.upload监听上传过程,注册progress事件,打印回调函数中的event事件
xhr.upload.addEventListener('progress', function (e) {
console.log(e);
//loaded代表上传了多少
//total代表总数为多少
var progressRate = (e.loaded / e.total) * 100 + '%';
//通过设置进度条的宽度达到效果
$('.progress > div').css('width', progressRate);
})
return xhr;
}
})
})
})
</script>
<title>Title</title>
</head>
<body>
<form action="addPlayer" method="get">
<p>账号:<input type="text" name="name"></p>
<p>密码:<input type="text" name="password"></p>
<p>昵称:<input type="text" name="nickname"></p>
<p>头像:
<br/>
<input id="photo" type="file">
<br/>
<%--图片回显--%>
<img id="headImg" style="width: 250px;height: 250px"
alt="你暂时还未上传图片">
<br/>
<%--进度条--%>
<div class="progress">
<div></div>
</div>
<a id="uploadFile" href="javascript:void(0)">立即上传</a>
<%--使用隐藏的输入框存储文件名称和文件类型--%>
<input id="photoInput" type="hidden" name="photo">
<input id="filetypeInput" type="hidden" name="filetype">
</p>
<p><input type="submit" value="注册"></p>
</form>
</body>
</html>
4、FileController01、FileController02
文件上传中的几个问题
[1]
1、 中文文件名编码问题:
已经通过过滤器解决
2 、文件位置存储问题
放在当前项目下,作为静态资源,这样可以通过URL访问
/*1、指定文件存储目录为我们项目部署环境下的upload目录*/
String realPath = req.getServletContext().getRealPath("/upload");
//System.out.println(realPath);
//File dir = new File("f:/imgs");
File dir = new File(realPath);
//如果不存在则创建目录
if(!dir.exists()){ //exists:目标存在 存在
dir.mkdir(); //mkdir:创建目录 创建文件夹 创建路径 建立目录
}
FileController01
[2]
3、 文件名冲突问题
使用UUID对文件名进行重命名
/*4、避免文件名冲突,使用UUID替换文件名*/
String uuid = UUID.randomUUID().toString();
/*3、获取拓展名*/
String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
String newFileName = uuid.concat(extendsName);
//String newFileName = uuid.conca(extendsName);//获取新的文件名
//或者String newFileName = uuid+extendsName;
File file = new File(dir,newFileName);//文件存储位置
[3]
4 、控制文件类型
/*5、(控制文件类型)判断文件类型*/
if(!extendsName.equals(".jpeg")){
//map.put("error","文件类型必须是.jpeg");
map.put("message","文件类型必须是.jpeg");
return map;
}
5、 控制文件大小
/*6、(控制文件大小)判断文件大小*/
if(headPhoto.getSize()>1024*1024*2){
map.put("message","文件大小不能超过2M");
return map;
}
[4]
通过文件上传解析组件控制
但是会出现异常,后期可以可以配置一个异常解析器解决
<!--文件上传解析组件
id必须为multipartResolver
springmvc默认使用该id找该组件
-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--设置文件大小-->
<property name="maxUploadSizePerFile" value="10"></property>
</bean>
[5]
6 、上传图片回显问题(后台已经将图片的文件名响应给浏览器)
//3、接受后台响应的信息
//console.log(result)
alert(result.message)
//4、图片回显
/*$("#headImg").attr("src",result.newFileName);*/
$("#headImg").attr("src","http://192.168.1.6:8090/upload/"+result.newFileName);
<%--.............................................................--%>
<%--图片回显--%>
<img id="headImg" style="width: 250px;height: 250px"
alt="你暂时还未上传图片">
<br/>
[6]
7、 进度条问题
https://www.cnblogs.com/wuyu1787/p/8919588.html
<%--进度条样式--%>
<style>
.progress {
width: 200px;
height: 10px;
border: 1px solid #ccc;
border-radius: 10px;<%--角弧度--%>
margin: 10px 0px;
overflow: hidden;
}
/* 初始状态设置进度条宽度为0px */
.progress > div {
width: 0px;
height: 100%;
background-color: yellowgreen;
transition: all .3s ease;
}
</style>
<%--................................................................--%>
/*监听进度条*/
xhr: function() {
var xhr = new XMLHttpRequest();
//使用XMLHttpRequest.upload监听上传过程,注册progress事件,打印回调函数中的event事件
xhr.upload.addEventListener('progress', function (e) {
console.log(e);
//loaded代表上传了多少
//total代表总数为多少
var progressRate = (e.loaded / e.total) * 100 + '%';
//通过设置进度条的宽度达到效果
$('.progress > div').css('width', progressRate);
})
return xhr;
}
<%-................................................................--%>
<%--进度条--%>
<div class="progress">
<div></div>
</div>
[7]
8、 单独准备文件存储服务器
分服务器上传作用
数据库服务器:运行我们的数据库
缓存和消息服务器:负责处理大并发访问的缓存和消息
文件服务器:负责存储用户上传文件的服务器。
应用服务器:负责部署我们的应用
在实际开发中,我们会有很多处理不同功能的服务器。(注意:此处说的不是服务器集群)
总结:分服务器处理的目的是让服务器各司其职,从而提高我们项目的运行效率。
分服务器工作示意图
给电脑安装两个tomcat
@Controller
public class FileController01 {
@ResponseBody//不会吧return返回的字符串当做路径处理
@RequestMapping("fileUpload1.do")
/*后台接收文件*/
public Map<String,String> fileUpload(MultipartFile headPhoto,HttpServletRequest req) throws IOException {
Map<String,String> map = new HashMap<String, String>();
/*6、(控制文件大小)判断文件大小*/
if(headPhoto.getSize()>1024*1024*2){
map.put("message","文件大小不能超过2M");
return map;
}
/*1、指定文件存储目录为我们项目部署环境下的upload目录*/
String realPath = req.getServletContext().getRealPath("/upload");
//System.out.println(realPath);
//File dir = new File("f:/imgs");
File dir = new File(realPath);
//如果不存在则创建目录
if(!dir.exists()){ //exists:目标存在 存在
dir.mkdir(); //mkdir:创建目录 创建文件夹 创建路径 建立目录
}
/*2、获取文件信息:*/
String originalFilename = headPhoto.getOriginalFilename();//获取文件名
/*4、避免文件名冲突,使用UUID替换文件名*/
String uuid = UUID.randomUUID().toString();
/*3、获取拓展名*/
String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
/*5、(控制文件类型)判断文件类型*/
if(!extendsName.equals(".jpeg")){
//map.put("error","文件类型必须是.jpeg");
map.put("message","文件类型必须是.jpeg");
return map;
}
String newFileName = uuid.concat(extendsName);
//String newFileName = uuid.conca(extendsName);//获取新的文件名
//或者String newFileName = uuid+extendsName;
File file = new File(dir,newFileName);//文件存储位置
headPhoto.transferTo(file);//文件保存
//上传成功之后,把文件的名字和文件类型返回给浏览器
//map.put("success","上传成功");
map.put("message","上传成功");
map.put("newFileName",newFileName);
map.put("filetype",headPhoto.getContentType());
//String contentType = headPhoto.getContentType();//文件类型
return map;
}
}
FileController02
@Controller
public class FileController02 {
//文件存储位置(静态常量)
private final static String FILESSERVER = "http://192.168.1.6:8090/upload/";
@ResponseBody//不会吧return返回的字符串当做路径处理
@RequestMapping("fileUpload2.do")
/*后台接收文件*/
public Map<String,String> fileUpload(MultipartFile headPhoto,HttpServletRequest req) throws IOException {
Map<String,String> map = new HashMap<String, String>();
/*2、获取文件信息:*/
//获取文件名
String originalFilename = headPhoto.getOriginalFilename();
/*4、避免文件名冲突,使用UUID替换文件名*/
String uuid = UUID.randomUUID().toString();
/*3、获取拓展名*/
String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
//获取新的文件名
String newFileName = uuid.concat(extendsName);
//创建sun公司提供的jersey包中的client对象
Client client = Client.create();
//打开目标资源
WebResource resource = client.resource(FILESSERVER + newFileName);
//文件保存到另一个服务器上
resource.put(String.class,headPhoto.getBytes());
//上传成功之后,把文件的名字和文件类型返回给浏览器
map.put("message","上传成功");
//map.put("newFileName",FILESSERVER+newFileName);
map.put("newFileName",newFileName);
map.put("filetype",headPhoto.getContentType());
return map;
}
@RequestMapping("fileDownLoad.do")
public void fileDownLoad(String photo, String filetype, HttpServletResponse response) throws IOException {
//获取下载的文件名 文件类型
//设置响应头
//告诉浏览器要将数据保存到磁盘上,不在浏览器上直接解析
response.setHeader("Content-Disposition","attachment;filename="+photo);
//告诉浏览器下载文件类型
response.setContentType(filetype);
//获取一个文件的输入流
InputStream inputStream = new URL(FILESSERVER + photo).openStream();
//获取一个指向浏览器的输出流
ServletOutputStream outputStream = response.getOutputStream();
//向浏览器响应文件即可
IOUtils.copy(inputStream,outputStream);
//IOUtils:org.apache.commons.io
}
}
PlayerController
@Controller
public class PlayerController {
@Autowired
private PlayerService playerService;
@RequestMapping("addPlayer")
public String addPlayer(Player player){
//将调用服务层方法,将数据保存进入数据库
// System.out.println(player);
//页面跳转至player信息展示项目
playerService.addPlayer(player);
//return "redirect:/html/showPlayer.html";
return "redirect:/showPlayer.jsp";
}
}
5、Player
@AllArgsConstructor
@NoArgsConstructor
@Data
public class Player implements Serializable {
private Integer id;
private String name;
private String password;
private String nickname;
private String photo;
private String filetype;
}
6、PlayerService
public interface PlayerService {
int addPlayer(Player player);
}
7、PlayerServiceImpl
@Service
public class PlayerServiceImpl implements PlayerService {
@Autowired
private PlayerMapper playerMapper;
@Override
public int addPlayer(Player player) {
return playerMapper.addPlayer(player);
}
}
8、PlayerMapper
public interface PlayerMapper {
public int addPlayer(Player player);
}
9、PlayerMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wml.mapper.PlayerMapper">
<insert id="addPlayer" >
/*容易出错*/
insert into player values(DEFAULT,#{name},#{password},#{nickname},#{photo},#{filetype})
</insert>
</mapper>
10、测试UUID代码
public class TestUUID {
@Test
public void getUUID(){
UUID uuid = UUID.randomUUID();
String s = uuid.toString();
System.out.println(s);
}
}
1、文件的下载
下载之前的准备 ,展示所有玩家信息,包括图片展示
1、下载的基本流程
文件的上传是将用户本地的资源发送到服务器,让服务器存储到其硬盘中的过程。而下载和上传正好是相反的过程。下载是用户发起请求,请求要下载的资源。服务器根据请求,将其硬盘中的文件资源发送给浏览器的过程。
2、下载的请求数据
用户通过浏览器发起下载请求,服务器在接收到请求后,根据当前请求的用户信息,去数据库中获取当前用户要下载的资源的文件路径,然后服务器再去其硬盘中读取对应的文件,将文件响应给浏览器,基于此过程,下载请求的请求数据为:简单的下载:文件的路径直接作为一个字段存储在用户信息表中用户的ID。
[1] 下载的后台实现
1. 创建单元方法处理下载请求
2. 根据请求获取要下载的资源的流对象
3. 读取文件并将资源响应给浏览器
[2] 下载的示例代码
1、showPlayer.jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
#playerTable{
width: 50%;
border: 3px solid red ;
margin: 0px auto;
text-align: center;
}
#playerTable th,td{
border: 1px solid yellow;
}
#playerTable img{
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function(){
$.ajax({
type:"get",
url:"getAllPlayer",
success:function(players){
$.each(players,function (i, e) {
console.log(e)
/*追加内容*/
$("#playerTable").append('<tr>\n' +
' <td>'+e.id+'</td>\n' +
' <td>'+e.name+'</td>\n' +
' <td>'+e.password+'</td>\n' +
' <td>'+e.nickname+'</td>\n' +
' <td>\n' +
' <img src="http://192.168.1.6:8090/upload/'+e.photo+'" alt="暂未发现图片" src>\n' +
' </td>\n' +
' <td>\n' +
' <a href="fileDownLoad.do?photo='+e.photo+'&filetype='+e.filetype+'">下载</a>\n' +
' </td>\n' +
' </tr>')
})
}
})
})
</script>
</head>
<body>
<table id="playerTable" cellpadding="0px" cellspacing="0px">
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>昵称</th>
<th>头像</th>
<th>操作</th>
</tr>
</table>
</body>
</html>
2、PlayerController
@Controller
public class PlayerController {
@Autowired
private PlayerService playerService;
//定义一个下载处理单元
@RequestMapping("getAllPlayer")
@ResponseBody
public List<Player> getAllPlayer(){
return playerService.getAllPlayer();
}
}
3、PlayerService
public interface PlayerService {
List<Player> getAllPlayer();
}
4、PlayerServiceImpl
@Service
public class PlayerServiceImpl implements PlayerService {
@Autowired
private PlayerMapper playerMapper;
@Override
public List<Player> getAllPlayer() {
return playerMapper.getAllPlayer();
}
}
5、PlayerMapper
public interface PlayerMapper {
@Select("select * from player")/*不用写***Mapper配置文件*/
List<Player> getAllPlayer();
}