码上快乐

相关内容   简体   繁体

javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传 （非常详细，从创建项目开始）

本文转载自  查看原文  2020-04-29 10:00  611    Java EE/ javaEE

实现文件上传和回显

1、新建一个SpringBoot项目，选择 Spring Web 和 thymeleaf 依赖 。pow.xml文件下的依赖如下

 

2、根据下图，创建如下文件

 

 3、直接上代码

配置文件 application.xml

server:
  port: 8005
file:
  upload:
    path: F://upload/
    relationImg: /images/

配置类 MyWenMvcConfigurer.java

/** 资源映射路径 */
@Configuration
public class MyWebMvcConfigurer implements WebMvcConfigurer {

    /** 保存的真实地址 */
    @Value("${file.upload.path}")
    String sysPath;

    /** 请求的相对地址 */
    @Value("${file.upload.relationImg}")
    String relationImg;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        /** 将相对地址映射到真实地址 */
        registry.addResourceHandler(relationImg+"**").addResourceLocations("file:/"+sysPath+relationImg);
    }
}

服务层接口 UploadService.java

public interface UploadService {
    /** 保存文件并返回文件的相对路径 */
    public String uploadImg(MultipartFile file);
}

服务层实现类 UploadServiceImpl.java

@Service
public class UploadServiceImpl implements UploadService {

    @Value("${file.upload.path}")
    String sysPath;

    @Value("${file.upload.relationImg}")
    String relationImg;

    @Override
    public String uploadImg(MultipartFile file) {
        //uuid生成的唯一前缀 + 上传文件名 构成唯一的新文件名
        String fileName= UUID.randomUUID()+"_"+file.getOriginalFilename();
        //文件保存路径
        String path=sysPath+relationImg;
        //新建文件filepath
        File filepath=new File(path,fileName);
        //判断路径是否存在，如果不存在就创建一个
        if(!filepath.getParentFile().exists()){
            filepath.getParentFile().mkdirs();
        }
        try {
            //将上传的文件file写入文件filepath
            file.transferTo(new File(path+File.separator+fileName));
        }catch (IOException e){
            e.printStackTrace();
        }
        //将请求文件的相对路径返回
        return relationImg+fileName;
    }
}

控制类 UploadController.java

@Controller
public class UploadController {

    @Autowired
    UploadService uploadService;

    @GetMapping("/uploadImg")
    public String getuploadImg(){
        return "/upload/uploadImg";
    }

    @PostMapping("/uploadImg")
    public String uploadImg(@RequestParam("file")MultipartFile file, Model model){
        String imgUrl=uploadService.uploadImg(file);
        model.addAttribute("imgUrl",imgUrl);
        return "/upload/uploadImg";
    }
}

视图层 uploadImg.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>图片上传并回显</title>
</head>
<body>
<form action="/uploadImg" enctype="multipart/form-data" method="post">
    <input type="file" accept="image/*" name="file">
    <input type="submit" value="上传" style="background-color: antiquewhite">
</form>
图片地址：[[${imgUrl}]]
<br>
<img th:src="@{${imgUrl}}" style="width: 200px;height: 200px;border-radius: 20px;">

</body>
</html>

效果图：

 真实保存路径：F:\upload\images

注意下面两张图的名字，第一张多了的前缀就是 UUID.randomUUID() 生成的，为了保证文件名的唯一性

 

单文件上传

控制层 FileController.java

@Controller
public class FileController {
    //单文件上传页面跳转
    @GetMapping("/singleUpload")
    public String singleUpload(){
        return "singleUpload";
    }
    //单文件上传管理
    @PostMapping("/singleUploadFile")
    public String singleUploadFile(HttpServletRequest httpServletRequest, MultipartFile file, Model model) throws IOException {
        //获取文件名以及后缀名
        String fileName=file.getOriginalFilename();
        //重新生成文件名（根据具体情况生成对应文件名）
        fileName= UUID.randomUUID()+"_"+fileName;
        //指定上传文件本地存储目录，不存在需要提前创建
        String dirPath="F:/file/";
        File filePath=new File(dirPath);
        //指定上传文件本地存储目录，不存在需要提前创建
        if(!filePath.exists()){
            filePath.mkdirs();
        }
        try{
            //将文件写入磁盘
            file.transferTo(new File(dirPath,fileName));
            model.addAttribute("uploadStatus","上传成功");
        }catch (Exception e){
            e.printStackTrace();
            model.addAttribute("uploadStatus","上传失败："+e.getMessage());
        }
        //将带上传状态信息回调到文件上传页面
        return "singleUpload";
    }
}

singleUpload.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>单文件上传</title>
    <link th:href="@{/css/bootstrap.min.css}"rel="stylesheet">
    <script th:src="@{/js/jquery/min.js}"></script>
</head>
<body>
    <div th:if="${uploadStatus}" style="color:red;font-size: large" th:text="${uploadStatus}">上传成功!</div>
    <form th:action="@{/singleUploadFile}" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label>单文件上传</label>
            <input class="form-control-file" type="file" name="file" required="required">
        </div>
        <input id="submit" type="submit" value="上传">
    </form>
</body>
</html>

 

效果图：

 点击上传后

保存地址

 

 

多文件上传

控制层 FileController.java

@Controller
public class FileController {
 //多文件上传页面跳转
    @GetMapping("/mutiUpload")
    public  String mutiUpload(){ return "mutiUpload";}
    //多文件上传管理
    @PostMapping("/mutiUploadFile")
    public String mutiUploadFiles(MultipartFile[] files,Model model){
        for(MultipartFile file:files){
            String fileName=file.getOriginalFilename();
            fileName=UUID.randomUUID()+"_"+fileName;

            String dirPath="F:/file/";
            File filePath=new File(dirPath);
            if(!filePath.exists()){
                filePath.mkdirs();
            }
            try{
                file.transferTo(new File(dirPath+fileName));
                model.addAttribute("uploadStatus","上传成功");
            } catch (IOException e) {
                e.printStackTrace();
                model.addAttribute("uploadStatus","上传失败");
            }
        }
        return "mutiUpload";
    }
}

mutiUpload.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>动态添加文件上传列表</title>
    <link th:href="@{/css/bootstrap.min.css}"rel="stylesheet">
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
</head>
<body>
    <div th:if="${uploadStatus}" style="color:red;" th:text="${uploadStatus}">上传成功</div>
    <form th:action="@{/mutiUploadFile}" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label>动态添加文件上传</label>
            <input type="button" value="添加文件" onclick="add()"/>
            <div id="file" class="" th:value="文件上传区域"></div>
        </div>
        <input id="submit" type="submit" value="上传" style="display: none;margin-top:10px;">
    </form>
<script>
    //动态添加上传按钮
    function add() {
        var innerdir="<div>"+
            "<input type='file' style='margin:5px;' name='files' required='required'>"+
            "<input type='button' value='删除' onclick='remove(this)'>"+
            "</div>"
       $("#file").append(innerdir);
        $("#submit").css("display","block");
    }
    function remove(obj) {
        $(obj).parent().remove();
        if($("#file div").length==0){
            $("#submit").css("display","none");
        }
    }
</script>
</body>
</html>

效果图：

 点击上传后：

保存的地址：

 

Ajax异步文件上传

 控制层

@Controller
public class FileController {
//ajax文件上传页面跳转
    @GetMapping("/ajaxUpload")
    public String ajaxUpload(){return "ajaxUpload";}

    //ajax文件上传管理
    @ResponseBody
    @PostMapping("/ajaxUploadFile")
    public Map ajaxUploadFile(MultipartFile[] files){
        Map<String,Object> map=new HashMap<>();
        map.put("test","test");
        for(MultipartFile file:files){
            String fileName=file.getOriginalFilename();
            fileName=UUID.randomUUID()+"_"+fileName;
            String dirPath="F:/file/";
            File filePath=new File(dirPath);
            if(!filePath.exists()){
                filePath.mkdirs();
            }
            try{
                file.transferTo(new File(dirPath+fileName));
                map.put("msg","上传成功");
            } catch (Exception e) {
                e.printStackTrace();
                map.put("msg","上传失败");
            }
        }
        return map;
    }

}

视图层

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>异步无刷文件上传</title>
    <link th:href="@{/css/bootstrap.min.css}"rel="stylesheet">
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
</head>
<body>
<form id="form">
    <div class="form-group">
        <label>异步无刷文件上传</label>
        <input type="button" value="添加文件" onclick="add()"/>
        <div id="file" class="" th:value="文件上传区域"></div>
    </div>
    <input id="submit" type="button" value="上传" onclick="ajaxUpload()" style="display: none;margin-top:10px;">
</form>
<script>
    function ajaxUpload() {
        var form=new FormData();
        //获取选择的文件
        $.each($('input[name="files"]'),function(index,item){
            form.append("files",item.files[0])
        });
        $.ajax({
            method: 'post',
            url: '/ajaxUploadFile',
            data: form,
             processData: false,
             contentType: false,
            success: function (res) {
                alert(res.msg);
            },
            error: function () {
                console.log("ajax请求失败");
            }
        });
    }
    //动态添加上传按钮
    function add() {
        var innerdir="<div>"+
            "<input type='file' style='margin:5px;' name='files' required='required'>"+
            "<input type='button' value='删除' onclick='remove(this)'>"+
            "</div>"
        $("#file").append(innerdir);
        $("#submit").css("display","block");
    }
    function remove(obj) {
        $(obj).parent().remove();
        if($("#file div").length==0){
            $("#submit").css("display","none");
        }
    }
</script>
</body>
</html>

效果图：

 

 

 保存地址

 

 

参考博客网址：https://www.cnblogs.com/zhainan-blog/p/11169163.html（springboot\thymeleaf实现图片上传和回显）

参考：JavaEE实验9（单文件上传\多文件上传\ajax异步文件上传）

文档：

链接：https://pan.baidu.com/s/1zb9UsQz_uXU5b_BAOQr6PQ
提取码：9eim

源码：

链接：https://pan.baidu.com/s/1Tvw7y0PwLylBGDUPLu--ww
提取码：09u1


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 springboot+thymeleaf 实现图片文件上传及回显 文件的上传和回显 基于springboot的ajax异步文件上传 SpringBoot+ajax+formData实现图片上传和回显 springboot 上传图片与回显 ajax上传图片文件 thinkphp5 ajax图片文件异步上传 普通文件的上传（表单上传和ajax文件异步上传） 文件的上传（表单上传和ajax文件异步上传） 文件的上传（1）（表单上传和ajax文件异步上传）
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM