Spring MVC使用ajax實現文件的上傳，並將上傳記錄添加到數據庫

最近在完成自己的畢業設計，但文件的上傳功能以前都沒有遇到過，花了兩天的時間解決了。期間遇到了較多的問題，現對該功能做記錄。

1. 前端（使用BootStrap和ajax)

2. 後端使用Sprinf、Spring MVC和Mybatis

   • 這裏主要包含兩個功能：（1）使用下拉列表選擇上傳者，其中的信息通過ajax獲取並動態添加；（2） 創建上傳文件的按鈕，並通過點擊上傳按鈕 實現文件的上傳

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <form id="uploadfile" role="form" class="form-horizontal" enctype="multipart/form-data">
                                        <div class="form-group">
                        <label for="uploader">上傳者</label> <select id="uploader" name="uploader"></select>
                    </div>
                    <div class="form-group">
                        <label for="uploadFile">文件上傳</label><input type="file"
                            id="file" name="file" />
                        <p class="help-block">這裏顯示幫助文檔</p>
                    </div>
                    <button type="button" class="btn btn-default" onClick="commit()">上傳</button>
                </form>
            </div>
        </div>
    </div>

//獲取所有的上傳者信息，並動態添加到`select`選擇框中
        $(document).ready(
                function() {
                    $.ajax({
                        type : "POST",
                        url : "${ctx}/employeeControl/getallEmoloyee",
                        success : function(data) {
                            $("#uploader").append(
                                    '<option value=0>請選擇</option>');
                            for (var i = 0; i < data.length; i++) {
                                $("#uploader").append(
                                        '<option value="'+data[i].employee_id+'">'
                                                + data[i].username
                                                + '</option>');
                            }
                        }
                    });
                });
        //重點是這裏
        function commit() {
            var uploader = $("#uploader").val();//獲得`select`選擇器的value值
            var file = $("#file")[0].files[0];//獲得上傳文件
            var form = new FormData();//初始化formDate對象
            //將兩個變量通過append方法添加到formdata中，append方法中的第一個參數必須與後端請求的一致，第二個參數就是我們獲取到的值
            form.append("uploader",uploader);
            form.append("file",file);
            $.ajax({
                type : "POST",
                //文件的上傳路徑
                url : "${ctx}/fileControl/addFile",
                //將formdata對象添加爲參數
                data : form,
                //開啓異步
                async : true,
                cache : false,
                contentType : false,
                processData : false,
                success : function(data) {
                //後端返回"SUCCESS"或"ERROR"
                    alert(data)
                }
            });
        }

• 後端控制層代碼

    @RequestMapping(value = "/addFile")
    @ResponseBody
    public String addFile(@RequestParam("file") CommonsMultipartFile uploadFile, HttpServletRequest request,
            @RequestParam(value="uploader") Integer uploader) {
        log.info("文件："+uploadFile+"uploader:"+uploader);
        com.example.oa.domain.File f = new com.example.oa.domain.File();
        String filename = uploadFile.getOriginalFilename();
        String path = request.getSession().getServletContext().getRealPath("uploadfile");
        if (request instanceof MultipartHttpServletRequest) {
            String filepath = path + File.separator + filename;
            f.setFile_location(filepath);
            f.setFilename(filename);
            f.setFilesize(uploadFile.getSize());
            f.setEmployee_id(uploader);
            log.info("文件路徑：" + path);
            log.info("名字" + uploadFile.getOriginalFilename());
            log.info(uploadFile.getSize());
            File file = new File(path, filename);
            if (!file.exists()) {
                file.mkdirs();
            }
            try {
                uploadFile.transferTo(file);
            } catch (IllegalStateException e) {
                e.printStackTrace();
                return "ERROR";
            } catch (IOException e) {
                e.printStackTrace();
                return "ERROR";
            }
            boolean isadded = fileservice.addFile(f);
            if (isadded) {
                return "SUCCESS";
            }
            return "ERROR";
        }
        return "ERROR";
    }
}

後端沒什麼好說的，獲得前端傳過來的參數，創建文件夾，並使用set方法將文件信息返回給服務層，再講信息添加到數據庫即可。

我的畢業設計託管在碼雲上，該功能也包含其中，如果遇到問題，希望能幫助到你
https://gitee.com/funnybuff/OA_system
至此，使用ajax實現文件的上傳就完成了