Bootstrap下fileinput 文件上传，删除，大概思路及fileinput参数配置

$("#jdzjz .esf").fileinput({
language: 'zh', //设置语言
    uploadUrl:"upload/jdzj", //上传controller映射的地址
    deleteUrl: '#',//移除
    <c:if test="${appraInfo.esf!=null}">
    initialPreview: [
                     " <img src='api/ylzjyj/${appraInfo.id}' width='500' class='file-preview-image kv-preview-data rotate-38827 is-portrait-gt4' alt='' title='#' style=' height: auto; max-width: 100%; max-height: 100%; margin-top: 0px;'>"],

 //此处为数据库取出的照片，并预览   

initialPreviewConfig: [

                           {
                                url: 'api/zjyjDel/',//删除controller映射
                               
                               extra: {id: ${appraInfo.id==null?-1:appraInfo.id } }//因为是post方式，此处携带上面映射所需参数
                               
                               
                           }
                       ],
     </c:if>
    allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
    uploadExtraData:{id:'1'},// function() { //传递参数}
    uploadAsync: true, //默认异步上传
    showUpload:true, //是否显示上传按钮
    showRemove :true, //显示移除按钮
    showPreview :true, //是否显示预览
    showCaption:false,//是否显示标题
    browseClass:"btn btn-primary", //按钮样式    
    dropZoneEnabled: true,//是否显示拖拽区域
    minImageWidth: 50, //图片的最小宽度
    minImageHeight: 50,//图片的最小高度
    maxImageWidth: 10000,//图片的最大宽度
    maxImageHeight: 10000,//图片的最大高度
   //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
    minFileCount: 0,
    maxFileCount:1, //表示允许同时上传的最大文件个数
    enctype:'multipart/form-data',
    validateInitialCount:true,
    previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"

});

//上传contorller

@RequestMapping(value="jdzj", method = RequestMethod.POST)
@ResponseBody
public String jdzjunLoad(HttpServletRequest request, Integer id,
@RequestParam("file")MultipartFile file) throws IOException
{
AppraisalBaseInfo abi=new AppraisalBaseInfo();
if (id!=null) {
abi.setId(id);
abi.setEsf(file.getBytes());
appservice.updateAppraisal(abi);

}
return "{}";//上传成功会有个回调函数，返回json

}

//页面加载预览数据库已经存在的照片controller

@RequestMapping(value = "ylzjyj/{id}", method = RequestMethod.GET)
public Object ylzjyjjApi(@PathVariable("id") Integer id) {
AppraisalFilterDto filterDto = new AppraisalFilterDto();
filterDto.setId(id);
filterDto.setType(2);
filterDto.setPicture(1);
List<AppraisalBaseInfo> appraInfos = appraisalService.QueryAppraisal(filterDto);
AppraisalBaseInfo appraInfo = appraInfos.get(0);


return appraInfo.getEsf();//esf为数据库存储照片二进制文件的字段
}

//删除controller

@RequestMapping(value = "zjyjDel", method = RequestMethod.POST)
public String zjyjjDel( @RequestParam("id")Integer id,HttpServletRequest request) {
AppraisalFilterDto filterDto = new AppraisalFilterDto();
filterDto.setId(id);
filterDto.setPicture(1);
appraisalService.delAppraisal(filterDto);
return "{}";//删除成功回调函数返回json
}