基于SSM框架 使用Multipart提交带文件(文件+其他相关信息)的表单

基于SSM框架 使用Multipart提交带文件(文件+其他相关信息)的表单

这几天写考核项目,遇到了一个需要上传带有文件的表单的功能。

难点是文件上传,和相关的controller层的写法。在这里做一个记录,欢迎批评指正 —— 2018年9月26日 09:25:44

首先需要一个前台页面,关于文件上传,前台HTML页面的要点不多说,

<form action="/plan/plansubmit"enctype="multipart/form-data" id="tf" method="post"  class="form-horizontal" role="form">

忽略class等属性,重要的无非就是 enctype="multipart/form-data" 和 method="post"   没有这两个要求,无法使用Multipart组件上传文件

全部表单如下,我这里除了文件上传,还设置两个时间输入框,两个textarea

<form action="/plan/plansubmit"enctype="multipart/form-data" id="tf" method="post"  class="form-horizontal" role="form">

                    
                    <div class="form-inline" id="div_time" >
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="glyphicon glyphicon-time"></span> 开始时间:</label>
                            <input class="col-sm-9 form-control form_datetime" size="16" name="starttime" type="text" id="datetimeStart" readonly >
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="glyphicon glyphicon-time"></span> 结束时间:</label>
                            <input class="col-sm-9 form-control form_datetime" size="16" name="endtime" type="text" id="datetimeEnd" readonly >
                        </div>
                    </div>
                     

                 
                    <div class="form-group" >
                        <label class="col-sm-3 control-label"><span class="glyphicon glyphicon-ok"></span> 今日计划:</label>
                        <textarea class="col-sm-9" name="planToday" placeholder="输入今日计划完成情况" rows="5" col="10"></textarea>
                    </div>
                      
                    <div class="form-group" >
                        <label class="col-sm-3 control-label"><span class="glyphicon glyphicon-list"></span> 明日计划:</label>
                        <textarea class="col-sm-9" name="planTomorrow" placeholder="输入明日计划" rows="5" col="10"></textarea>
                    </div>
                   

                 
                    <div class="form-inline">
                        <div class="form-group">
                            <label class="control-label"> <span class="glyphicon glyphicon-upload"></span> 上传学习报告:</label>
                                <input type="file" name="file" id="inputfile"></input>
                        </div>
                    </div>
                     <p style="margin-left: 150px;margin-bottom: 25px;" class="help-block">*点击上传文件提交学习报告</p>
                    

                    
                    <div class="form-group">
                        <div id="btn" style="margin-left: 160px">
                            <input type="submit" value="立即提交" class="col-sm-4 btn btn-warning">
                        </div>
                    </div>
                 </form>

这样,一个包含文件和其他信息的表单就以post的方式上传到了后台。

action指向的controller方法如下,接受参数,两个时间和两个testarea里面的文本内容

 @RequestMapping(value="/plansubmit",method = RequestMethod.POST)
    public ModelAndView planSubmit(@RequestParam("starttime")String starttime,
                                   @RequestParam("endtime")String endtime,
                                   @RequestParam("planToday")String planToday,
                                   @RequestParam("planTomorrow")String planTomorrow,
            @RequestParam("file")MultipartFile multipartFile,HttpServletRequest request,Model model){
        ModelAndView mv = new ModelAndView();

        //获取当前登录的用户名
        String USERNAME = Jurisdiction.getUsername();

        //当前文件名称
        String originalFilename;

        Plan plan = new Plan();
        plan.setUsername(USERNAME);
        plan.setStarttime(starttime);
        plan.setEndtime(endtime);
        plan.setPlantoday(planToday);
        plan.setPlantomorrow(planTomorrow);

        if(multipartFile!=null && !multipartFile.isEmpty())
        {   //0,判断是否为空

            /**
             * 对文件名进行操作防止文件重名
             */
            //1,获取原始文件名
            originalFilename = multipartFile.getOriginalFilename();
            //2,截取源文件的文件名前缀,不带后缀
            String fileNamePrefix = originalFilename.substring(0,originalFilename.lastIndexOf("."));
            //3,加工处理文件名,原文件加上时间戳
            String newFileNamePrefix  = fileNamePrefix + System.currentTimeMillis();
            //4,得到新文件名
            String newFileName = newFileNamePrefix + originalFilename.substring(originalFilename.lastIndexOf("."));

            //5,构建文件对象
            File file = new File(upLoadPath + newFileName);
            //6,执行上传操作
            try {
                multipartFile.transferTo(file);

                plan.setFilename(originalFilename);
                plan.setFilepath(upLoadPath);
                //获取上传时间
                Date date = new Date();
                SimpleDateFormat sdf =   new SimpleDateFormat( " yyyy-MM-dd HH:mm:ss " );
                String now = sdf.format(date);
                //设定现在时间
                plan.setNow(now);

                //上传成功,向jsp页面发送成功信息
                model.addAttribute("fileName","文件上传成功!  文件名:"+newFileName);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        //设置调用Service层状态变量,1为添加记录成功,
        //0为不成功,-1为初始值
        int status = -1;

        try {
            status = planService.insertPlan(plan);
        } catch (Exception e) {
            e.printStackTrace();
        }

        /*test:输出staus*/
        System.out.println("status的值为:"+status);
        
        //提交成功结果页面
        if (status == 1){
            mv.setViewName("system/plansubmit/upload_success");
        }else{
            mv.setViewName("system/plansubmit/upload_failure");
        }

        return mv;
    }

实际上,带有其他相关信息和文件的表单并没有这么复杂,按照正常的controller传参即可,对应的参数使用@RequestParam接收,如果是文件就 @RequestParam("file")MultipartFile multipartFile 即可。网上还有其他的类似formdata对象,使用ajax传参的方法下次可以试一下

猜你喜欢

转载自blog.csdn.net/Xenoverse/article/details/82848411