springmvc bootstrap-filestyle 多文件上传

最近公司中在做一个内部使用系统，在研发过程了，为了满足产品经理的需求，需要多文件上传，同时为了防止代码服务器在的空间被文件的大量使用，文件是通过sftp方式上传到ftp服务器的。那么问题来了，第一：如何是现实多文件上传。第二：如何上传到ftp服务器

这里先解决第一个问题，如何多文件上传。

各位之前可能都是选择通过flash等等的各种组件实现的多文件上传或者通过js动态添加<input  type="file" />。在h5没有出现之前，我也是这样的搞。最近发现h5中的<input type="file">中多了一个新的属性"multiple"。中文意思都知道吧。对就是他。但是h5原生的标签在样式上实在是不忍直视，而对应一个写接口的人来讲css3又太难了。不过万幸的是我们有百度，找到了bootstrap-filestyle，也就是bootstrap的一个组件。

直接上代码：

1：要想使用它必须引入的文件：

 <link href="${resourceUrl}/css/bootstrap.min.css" rel="stylesheet">

<script src="${resourceUrl}/bootStrapFile/bootstrap-filestyle.min.js"></script>

<script src="${resourceUrl}/bootStrapFile/bootstrap-filestyle.js"></script>

2：初始化file

<input type="file" class="file"  multiple="multiple" type="file"  id="requirementDoc" name="requirementDoc"  />

 jQuery(document).ready(function() {
        
        $('#requirementDoc').filestyle({
                 buttonText : '请选择文件'
            });
         });

初始化下面有很多的属性，自己可以去官网上看，这里就不做具体的介绍了。

3：ajax提交到后台

这段代码中有业务信息，其实只需要记住两点，  $.ajaxFileUpload、fileElementId。

reUploadReqDoc:function(){
        $("#updateReqDocHide").modal("hide");
        var requirementName = $("#requirementName").val();
        var productId = $("#productId").val();
        var projectId = $("#projectId").val();
        var projectplanId = $("#projectplanId").val();
        $.ajaxFileUpload({
            cache : false,
            type : "POST",
            dataType:"json",
            url : GV.ctxPath+"requirement/upLoadReqFile?requirementName="+requirementName+"&productId="+productId+"&projectId="+projectId+"&projectplanId="+projectplanId,
            fileElementId:'requirementDoc',
            error:function() {
                impAlert("上传用户故事文件出现异常！请从编辑需求界面重新上传!");
            },
            success:function(data){
                if(data.success == 'true'){
                    impAlert("上传需求文档成功!");
                    $.productEidtManager.goFirstPage();
                }
                if(data.success == 'false'){
                    impAlert("上传用户故事文件失败！请从编辑需求界面重新上传!");
                    $.productEidtManager.goFirstPage();
                }
                
            }
        });
    }

4：后台处理：

@ResponseBody
    @RequestMapping("upLoadReqFile")
    public String upLoadReqFile(@RequestParam MultipartFile requirementDoc[],String requirementName,String productId,String projectId,String projectplanId) throws JSONException, IOException{
        logger.info("开始上传需求文档");
        JSONObject json = new JSONObject();
        if(null !=requirementName && !requirementName.equals("")
                && null != productId && !productId.equals("")
                ){
            String path = productRequirementManagerBiz.getUpLoadFilePath(requirementName, productId, projectId, projectplanId, Context.REQ_PATH);
            if(requirementDoc.length>0){
                for(MultipartFile file : requirementDoc){
                    String fileName = file.getOriginalFilename();
                    ProductRequirements productRequirements = productRequirementService.getProductRequirementsByName(requirementName);
                    if(null != productRequirements){
                        long requirementId = productRequirements.getId();
                        //上传文件
                        Subject subject = SecurityUtils.getSubject();
                        User user = (User)subject.getSession().getAttribute("currentUser");
                        if(null != user){

                           //上传到ftp服务器。这部分可以看其他的blog

                            FileCabineResponse result = fileCabinetBiz.uploadOneFile(path, fileName, file, requirementId, DocumentType.PRODUCT,user.getUserName());
                            if(result.getFileResult().equals(FileResult.ALLSUCESS)){
                                json.put("success","true");
                            }else{
                                json.put("success","false");
                            }
                        }
                        
                    }
                }
            }
        }else{
            json.put("success","false");
        }
        
        return json.toString();
    }

搞定，这样就将多个文件一次性的上传到了ftp服务器