SpringBoot页面上传图片文件

本文详细介绍了使用Spring Boot实现文件上传的过程,包括前端HTML表单设置、JavaScript处理文件选择、后端控制器接收文件及保存。通过创建自定义文件夹并保存上传图片到指定路径,确保了文件上传功能的实现。同时,对文件大小、类型进行了限制,确保上传的安全性和规范性。
摘要由CSDN通过智能技术生成

先说下实现原理,个人觉得原理是这样的,如果各位老鸟发现有问题,请多多调教一波

首先在页面是一个表单,然后表单提交,提交到控制器,注意啊,到控制器的时候就是重点了。首先控制器会获取项目发布的路径和在这基础上你自定义的文件夹名比如(C:\Users\Administrator\AppData\Local\Temp\tomcat-docbase.973044055370348158.8882\statics\uploadfiles),获取完之后,如果自定义文件夹名存在则不创建,反之则创建。创建完之后会把图片上传到刚刚创建的文件夹里,最后就完成上传操作。

页面代码

<form class="layui-form my-form-class" action="" enctype="multipart/form-data">
     <input type="hidden" name="errorinfo" id="errorinfo" value="${uploadFileError}">
     <img  class="img" src="../images/nopictures.jpg" height="50" width="50">
     <input type="file" name="a_idPicPath" id="a_idPicPath"/>
     <font color="red"></font>

</form>

js代码

    $(function(){
        //点击选择文件显示头像的
        $("input[type='file']").change(function(){

            var file = this.files[0];
            if (window.FileReader) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                //监听文件读取结束后事件    
                reader.onloadend = function (e) {
                    $(".img").attr("src",e.target.result);    //e.target.result就是最后的路径地址
                };
            }
        });
    });

 function submitInfo(sendData) {
            $.ajax({
                url: get_result_url
                , data: sendData
                , type: "POST"
                , contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
                , async: false //同步请求
                , success: function (data) {
                    if (data == "true") {
                        parent.layer.msg("新增成功!", {icon: 1});
                        parent.$("#jqGrid").trigger("reloadGrid");
                    } else {
                        layer.msg(data, {icon: 5});
                    }
                }
            });
        }

       
        form.on('submit(sure)', function (data) {
            var formData = new FormData($( 'form')[0]);
            var data= formData;
            console.log(data)
          
            submitInfo(data);
        });

控制器后台代码

   @PostMapping("workflowLHLSAdd")
    @ResponseBody
    public String workflowLhlsAddPost(MwWorkitem mwWorkitem,
                                      HttpSession session, HttpServletRequest request,
                                      @RequestParam(value = "a_idPicPath",required = false) MultipartFile attach){
        String idPicPath=null;
        try{

            if(!attach.isEmpty()){
                //获取项目实际发布的上传路径并且加上你自己想创建的文件夹名File.separator是分割符
                String path=session.getServletContext().getRealPath("statics"+ File.separator+"uploadfiles");
                String oldFileName=attach.getOriginalFilename();//原文件名
                String prefix= FilenameUtils.getExtension(oldFileName);//源文件后缀
                int filesize=500000;
                if(attach.getSize()>filesize){//上传大小不得超过500kb
                    request.setAttribute("uploadFileError","* 上传大小不得超过500kb");
                    return "useradd";//返回添加页面
                }else if(prefix.equalsIgnoreCase("jpg")||prefix.equalsIgnoreCase("png")||
                        prefix.equalsIgnoreCase("jpeg")||prefix.equalsIgnoreCase("pneg")
                ){
                    String fileName= System.currentTimeMillis()+ RandomUtils.nextInt()+"_Personal.jpg";
                    File targetFile=new File(path,fileName);
                     if (!targetFile.getParentFile().exists()) {
                    targetFile.getParentFile().mkdirs();
                }
               /* if(!targetFile.exists()){
                    targetFile.mkdirs();
                }*/
                    //保存
                    try {
                        //里面底层源码就是把文件复制到你想复制到的文件目录下
                        attach.transferTo(targetFile);
                    } catch (IOException e) {
                        e.printStackTrace();
                        request.setAttribute("uploadFileError","* 上传失败!");
                        return "useradd";
                    }
                    //拼接图片路径
                    idPicPath="/statics"+ File.separator+"uploadfiles"+File.separator+fileName;
                }else {
                    request.setAttribute("uploadFileError","* 上传图片格式不正确");
                    return "useradd";
                }
            }
            mwWorkitem.setImgicon(idPicPath);
            //添加语句
            Integer rows = mwWorkitemService.insertMwWorkitem(mwWorkitem);
            if(rows>0){
                return "true";
            }else {
                return "添加失败";
            }
        }catch(Exception e){
            return e.getMessage();
        }
    }

如果各位老鸟发现博文有问题,欢迎指点一二

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hello Bug

谢谢老板,老板大气,老板硬邦邦

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值