上传和下载文件流程
<%--
Created by IntelliJ IDEA.
User: tomel
Date: 2022/6/25
Time: 21:48
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<style>
#playerTable{
width: 50%;
border: 3px solid cadetblue;
margin: 0px auto;
text-align: center;
}
#playerTable th,td{
border: 1px solid gray;
}
#playerTable img{
width: 100px;
height: 100px;
}
</style>
<title>Title</title>
<script type="text/javascript" src="static/js/jquery-3.5.1.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.201.28:8000/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>
<%--cellspacing设置为“0”，显示的结果就是第一个表格的每个单元格之间的距离为0
cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小
--%>
<table id="playerTable" cellpadding="0px" cellspacing="0px">
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>昵称</th>
<th>头像</th>
<th>操作</th>
</tr>
</table>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<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="static/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#uploadFile").click(function(){
// 获取要上传的文件
var photoFile =$("#photo")[0].files[0]
if(photoFile==undefined){
alert("您还未选中文件")
return;
}
// 将文件装入FormData对象
var formData =new FormData();
formData.append("headPhoto",photoFile)
// ajax向后台发送文件
$.ajax({
type:"post",
data:formData,
url:"fileUpload.do",
processData:false,
contentType:false,
success:function(result){
// 接收后台响应的信息
console.log(result)
alert(result.message)
// 图片回显
$("#headImg").attr("src", "http://192.168.201.28:8000/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) {
//loaded代表上传了多少
//total代表总数为多少
var progressRate = (e.loaded / e.total) * 100 + '%';
//通过设置进度条的宽度达到效果
$('.progress > div').css('width', progressRate);
})
return xhr;
}
})
})
})
</script>
</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: 200px;height: 200px" 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>
实体类
package com.msb.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;
@NoArgsConstructor
@AllArgsConstructor
@Data
public class Player implements Serializable {
private Integer id;
private String name;
private String password;
private String nickname;
private String photo;
private String filetype;
}
Controller层将数据存入数据库
package com.msb.controller;
import com.msb.mapper.PlayerMapper;
import com.msb.pojo.Player;
import com.msb.service.PlayerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
import java.util.Map;
@Controller
public class PlayerController {
@Autowired
private PlayerService playerService;
@RequestMapping("addPlayer")
public String addPlayer(Player player){
/*调用服务层方法将数据存入数据库*/
playerService.addPlay(player);
System.out.println(player);
/*playerService.addPlayer(player);*/
/*跳转至新的页面*/
return "redirect:/showPlayer.jsp";
}
@ResponseBody
@RequestMapping("getAllPlayer")
public List<Player> getAllPlayer(){
return playerService.getAllPlayer();
}
}
对图片进行下载
package com.msb.controller;
import org.apache.commons.io.IOUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
@Controller
public class fileDownload {
private final static String SERVICRPART = "http://192.168.201.28:8000/upload/";
@ResponseBody
@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(SERVICRPART + photo).openStream();
// 获取一个指向浏览器的输出流
ServletOutputStream outputStream = response.getOutputStream();
// 向浏览器响应文件即可
IOUtils.copy(inputStream, outputStream);
}
}
对图片的上传操作
package com.msb.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
@Controller
public class fileUpload {
//将上传的文件存储到本地
/* @ResponseBody
@RequestMapping("fileUpload.do")
public String fileUpload(MultipartFile headPhoto) throws IOException {
*//*获取文件上传的名称*//*
String originalFilename = headPhoto.getOriginalFilename();
*//*选择文件上传的位置,即传输的文件名*//*
File dir = new File("d:/IDEA/first/");
File file = new File(dir,originalFilename);
System.out.println(originalFilename);
headPhoto.transferTo(file);
return "OK";
}
/*远程存储路径加文件名
*设置服务路径http://192.168.201.28:8000/
*/
private final static String SERVICRPART = "http://192.168.201.28:8000/upload/";
//将上传的文件存储到target编译后的目录下
@ResponseBody
@RequestMapping("fileUpload.do")
public Map fileUpdownload(MultipartFile headPhoto, HttpServletRequest request) throws IOException {
Map<String,String> map = new HashMap<>();
/*获取文件上传的名称*/
/*解决因同名而图片被替换的问题，uuid+.png*/
String originalFilename = headPhoto.getOriginalFilename();
//生成随机uuid
String uuid = UUID.randomUUID().toString();
//留取最后一个.开头的文件字符（,jpg）
String substring = originalFilename.substring(originalFilename.lastIndexOf("."));
/*判断上传的文件类型*/
/*if (!substring.equals(".png")){
map.put("message","只支持png格式");
return map;
}
if (headPhoto.getSize()>1024*1024*5){
map.put("message","文件大小只能是5M");
return map;
}*/
//uuid拼接，jpg作为文件名进行存储
/*新的文件名字
* uuid+。jpg 用拼接 uuid.concat(substring)
* concat新的文件名字
* */
String concat = uuid.concat(substring);
/* 创建sun公司提供的jersey包中的client对象，引用这两个包
* import com.sun.jersey.api.client.Client;
* import com.sun.jersey.api.client.WebResource;
* */
Client client = Client.create();
//服务器路径+文件名存储到client对象
WebResource resource = client.resource(SERVICRPART+concat);
/*选择文件上传的位置,即传输的文件名*/
//指定文件存储目录为我们项目部署环境下的upload目录
/* String path = request.getServletContext().getRealPath("/upload");
File dir = new File(path);
//判断dir文件是否存在，不存在创建
if (!dir.exists()){
dir.mkdirs();
}*/
//增加了一部分创建文件夹在target中
// 文件保存到另一个服务器上去了
resource.put(String.class, headPhoto.getBytes());
map.put("message","上传成功");
//map返回路径，用于回显SERVICRPART+concat对应的文件
//map返回路径，用于回显concat对应的文件
map.put("newFileName",concat);
//将文件类型返回到map集合中
map.put("filetype",headPhoto.getContentType());
return map;
}
}
接口类的定义
package com.msb.service;
import com.msb.pojo.Player;
import java.util.List;
public interface PlayerService {
int addPlay(Player player);
List<Player> getAllPlayer();
}
接口的实现类
package com.msb.service.impl;
import com.msb.mapper.PlayerMapper;
import com.msb.pojo.Player;
import com.msb.service.PlayerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class PlayerServiceImpl implements PlayerService {
@Autowired
private PlayerMapper playerMapper;//注入playerMapper
@Override
public int addPlay(Player player) {
int addPlay = playerMapper.addPlay(player);
return addPlay;
}
@Override
public List<Player> getAllPlayer() {
return playerMapper.getAllPlayer();
}
}
Mapper接口
package com.msb.mapper;
import com.msb.pojo.Player;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Service;
import java.util.List;
public interface PlayerMapper {
int addPlay(Player player);
@Select("select * from player")
List<Player> getAllPlayer();
}
mapper.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.msb.mapper.PlayerMapper">
<!--int addPlayer(Player player);-->
<insert id="addPlay">
insert into player values(DEFAULT ,#{name},#{password},#{nickname},#{photo},#{filetype})
</insert>
</mapper>
浙公网安备 33010602011771号