基於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傳參的方法下次可以試一下