上传和下载文件流程

上传和下载文件流程

<%--
  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>
posted @   爱豆技术部  阅读(90)  评论(0)  编辑  收藏  举报
相关博文：
·  SpringMvc注入list实现的方法(对实体类数据的读取注解)
·  SSM整合项目整合，实现登录验证
·  文件上传与下载
·  JSP的文件上传和下载
·  SpringMVC--文件下载
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现
TOP
点击右上角即可分享
微信分享提示
SQL AI 助手