Bootstrap Fileinput 4.4.7文件上传实例

本实例所做功能为发送带附件邮件，可以上传多个附件，操作为选择一个附件以后自动上传，然后继续选择附件，填写完表单其他信息，点击保存发送带附件邮件。

HTML标签

<input id="fileUpload" type="file" name="file" data-show-preview="true" multiple/>

js初始化，设置全局文件名参数

var fileName = [];
function initFileInput(id, url) {
        $("#" + id).fileinput({
            language: 'zh', 
            uploadAsync:false,
            uploadUrl:url,
            browseClass: "btn btn-secondary",
            textEncoding:"UTF-8",
            showUpload: false,
            showPreview :true,
            dropZoneEnabled: false,
            maxFileCount:5,
            fileActionSettings:{
                showUpload: true
            },
            enctype:'multipart/form-data',
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        }).on("filebatchselected", function(event, files) {
            $("#fileUpload").fileinput("upload");
        }).on("filebatchuploadsuccess", function (event, data, previewId, index){
            if(data.response.success == true)
            {
                fileName.push(data.response.fileName);
            }else{
                alert("上传失败!");
            }
            $("#fileUpload").fileinput("clear");
            $("#fileUpload").fileinput("reset");
        }).on('fileerror', function(event, data, msg) {
             alert(msg);
        });
    }

java后台上传文件代码

@RequestMapping(value="/fileupload")
    @ResponseBody
    public Map<String, Object> fileUpload(HttpServletRequest request, HttpServletResponse response) {
        ResourceBundle bundle = PropertyResourceBundle.getBundle("application");
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
        Map<String,MultipartFile> fileMap = multipartRequest.getFileMap();
        String rootPath = bundle.getString("upLoadUrl");
        String filePath = rootPath;
        Map<String, Object> map = new HashMap<>();
        map = uploadFiles(filePath,fileMap);
        return map;
    }

实际上传操作，返回上传操作经过处理的文件名，保证服务器端文件名唯一

public Map<String, Object> uploadFiles(String savePath,Map<String,MultipartFile> fiLeMap){
        Map<String, Object> map = new HashMap<>();
        try {
            String fileName = "";
            if(fiLeMap!=null){
                for(Map.Entry<String, MultipartFile> entity:fiLeMap.entrySet()){
                    MultipartFile f = entity.getValue();
                    if(f != null && !f.isEmpty()){
                        String uuid = UUID.randomUUID().toString();
                        fileName = uuid + "#" + f.getOriginalFilename();
                        File newFile = new File(savePath + "/" + fileName); 
                        f.transferTo(newFile);
                    }
                }
            }
            map.put("success", true);
            map.put("fileName", fileName);
            return map;
        }catch (Exception e) {
            map.put("success", false);
            return map;
        }
    }

ajax提交其他表单参数和所传附件文件名集合

$.ajax({
            type: "POST",
            url: 所需要请求地址,
            dataType: "json",
            traditional:true,
            data: {
                service:$("#service").select2('val').replace("All",""),
                startTime:$("#start").val(),
                endTime:$("#end").val(),
                reason:$("#reason").val(),
                fileName:JSON.stringify(fileName),
                outterEmail:isOutterEmail,
                innerEmail:isInnerEmail,
                isSendEmail:isSendEmail,
                subService:$("#subService").select2('val'),
                runningStatus:$("#runningStatus").select2('val')
            },
            success: function(data){
                $("#loadingModal").modal("hide");
                fileName.splice(0,fileName.length);
                alert(data.msg);
                if(data.success) {
                    location.href = "revision";
                }
            },
            error:function(xhr) {
                $("#loadingModal").modal("hide");
                alert("保存失败");
            }
        });

有问题可以留言