layui結合SpringMVC上傳文件以及攜帶額外的參數上傳文件

 

　　今天在使用layui的過程中，遇到了使用其上傳文件的模塊。自己感覺文件上傳還是bootstrapfileinput插件比較好用一些，靈活方便，bootstrapfileinput使用方法參考:http://www.cnblogs.com/qlqwjy/p/8410413.html

 

　　在使用layui的文件上傳模塊的時候想要攜帶額外的參數，在這里鼓搗了半天。。。真的是坑。在這里還是總結一下layui文件上傳模塊的使用方法。

1.頁面准備文件上傳的模態框:

<!--相關的幾個模態框-->
<!--1 S    上傳圖片的模態框-->
<%--隱藏打開的index--%>
<input type="hidden" id="hidden_picture_index">
<div class="x-body" style="display: none" id="pictureModal">
    <div class="layui-upload">
        <!--隱藏培養方案編號-->
        <input type="hidden" id="hidden_trainSchemeId">
        <!--隱藏上傳文件的操作-->
        <input type="hidden" id="hidden_tmp_index">
        <button type="button" class="layui-btn" id="structurePicture"><!--動態賦值--></button>
        <!--預留一個預覽的img標簽-->
        <div id="imgDiv" style="display: none;margin-top: 10px;">
            <img id="imgPreview" width="400px" height="200px">
        </div>
        <div id="promptDiv" style="margin-top: 10px;display: none">
            <p><font style="font-size: 30px">您還沒有上傳課程關系結構圖，請先上傳課程關系結構圖!</font></p>
        </div>
    </div>
</div>
<!--1 E    上傳圖片的模態框-->

 

 

2.上傳文件的JS

layui.use(['upload','layer'],function () {
    var upload = layui.upload,layer = layui.layer;
    //普通圖片上傳
    var uploadInst = upload.render({
        elem: '#structurePicture',//綁定的元素
        url: contextPath+'/TrainPicture/uploadTrainPicture.do',//提交的url
        auto:true,//是否自動上傳
        accept:"images",//指定允許上傳的文件類型
        multiple:false,//支持多文件上傳
        acceptMime:"image/*",//規定打開文件選擇框時，篩選出的文件類型
/*        data:{
            trainningschemeid:  $("#hidden_trainSchemeId").val()
        },//額外攜帶的培養方案編號*/
        before: function(obj){
            this.data={"trainningschemeid": $("#hidden_trainSchemeId").val()}//攜帶額外的數據
            //預讀本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#imgPreview').attr('src', result); //圖片鏈接（base64）
            });
            var index = layer.load(); //開始上傳之后打開load層
            $("#hidden_tmp_index").val(index);//將load層的index隱藏到頁面中
        },
        done: function(res, index, upload){ //假設code=0代表上傳成功
            layer.close(layer.index); //它獲取的始終是最新彈出的某個層，值是由layer內部動態遞增計算的
            if(res.msg=="上傳成功"){
                //提示上傳成功(關閉之后將按鈕的內容變為更換圖片)
                layer.msg(res.msg, {icon: 1,time:2*1000},function () {
                    $("#structurePicture").text("更換主要課程關系結構圖");//按鈕標題置為上傳圖片
                    $("#promptDiv").css("display","none");//隱藏提示語
                    $("#imgDiv").css("display","");//顯示圖片框
                });
            }

        }
    });
})




/*************E  上傳培養方案課程結構圖相關操作***************/

 

　　data屬性用於攜帶額外的參數，可是我帶的參數總是""(空串)。后來查閱網上資料發現第二種解決辦法就是在before文件上傳的函數中動態設置上傳的參數。例如上面的before函數。但是有的時候上面的data屬性可以生效，有的時候卻不生效。。。。。。所以在攜帶參數的時候需要參考上面兩種方法看哪種生效。

 

注意:因為layui支持的格式默認為圖片文件（JPG）,在代碼中添加accept:'file'。有時候不添加會警告 選擇的圖片中包含不支持的格式

 

 

3.接收文件的后台:(Java代碼)

    @RequestMapping("/uploadTrainPicture")
    public ResposeResult addTrainPicture(Trainpicture trainpicture, MultipartFile file){
        //1.保存圖片到本地
        String fileoriname=null;//原名稱
        String filenowname=null;//系統生成的名稱
        if(file != null){
            fileoriname = file.getOriginalFilename();//獲取原名字
            filenowname = UUIDUtil.getUUID2()+ "."+FilenameUtils.getExtension(fileoriname);//UUID生成新的唯一名字+文件擴展名
        }

        try {
             FileHandleUtil.uploadSpringMVCFile(file, "trainPicture", filenowname);
        } catch (Exception e) {
            logger.error("保存培養方案圖片出錯",e);
        }
        //2.調用service保存數據庫
        trainpicture.setPictureoriname(fileoriname);
        trainpicture.setPicturenowname(filenowname);
        trainpicture.setUptime(new Date());
        ResposeResult resposeResult = new ResposeResult();
        String result = null;
        try {
            result = trainPictureService.addTrainPicture(trainpicture)?"上傳成功":"上傳失敗";
        } catch (SQLException e) {
            result = "上傳失敗";
            logger.error("保存培養方案數據庫出錯",e);
        }
        resposeResult.setMsg(result);
        return resposeResult;
    }

 

　　

　　發現在使用bootstrapfileinput的多文件上傳插件和layui的多文件上傳插件的原理都是每次傳一個文件，多個文件會訪問多次，所以java的MultipartFile也不必用數組接收。