bootstrap fileinput 使用记录

<#elseif modifyField["field_name"]?ends_with("_img")?string == "true">
    <div class="form-group">
        <label class="control-label">${modifyField["field_description"]}：</label>
        <!-- 用来作为form表单提交上传图片返回id的集合，这里我采用`，`隔开的字符串形式保存 -->
        <input type="text" hidden id="${modifyField["field_name"]}" name="${modifyField["field_name"]}" value=""/>
        <!-- 用来初始化上传组件 -->
        <input type="file" name="file" id="${modifyField["field_name"]}_uploadfile" multiple="multiple" class="file-loading" />
    </div>
<#else>

/**
 * 销毁图片上传组件
 * @param initUrl
 */
function destroyUploadImg(){
    //这里我用jquery找到我约定的上传组件，使用_uploadfile结尾，并遍历销毁
    $("#dlg input[id$='_uploadfile']").each(function(index,html){
        var upfile = $(html);
        upfile.fileinput("destroy");
    });
}

/**
 * 初始化fileinput组件
 */
var getFileInput = function(){
    //初始化方法，同样找到约定组件遍历
    $("#dlg input[id$='_uploadfile']").each(function(index,html){
        var upfile = $(html);

        var imgId = upfile.attr("id").substring(0,upfile.attr("id").lastIndexOf("_"))
        var val = $("#"+imgId).val();
        var preImageList = val.split(",");

        var initialPreview = [];
        var initialPreviewConfig = [];
        for (var i = 0; i < preImageList.length; i++) {
            if(preImageList[i] === "") {
                preImageList.splice(i,1);
                continue
            }
            initialPreview.push("${request.contextPath}/showPic?image_id=" + preImageList[i] + "&count=" + Math.random())

            var previewConfig = new Object();
            previewConfig.url = "${request.contextPath}/deleteImg.do";
            previewConfig.key = preImageList[i];

            var imageId = preImageList[i];
            previewConfig.extra = {"image_id": imageId,"pRow":JSON.stringify(pRow),"currPageId":${curr_page_id},"updateCol":imgId};//上传的额外参数，会作为post请求参数提交
            initialPreviewConfig.push(previewConfig);
        }
        if(upfile.length > 0) {
            //元素存在时执行的代码
            upfile.fileinput({
                theme: 'fa',
                allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件后缀
                //        maxFileSize:0,
                language: 'zh', //设置语言
                uploadUrl: "${request.contextPath}/uploadImg.do", //上传的地址
                uploadAsync: true, //默认异步上传
                uploadExtraData:{"currPageId":${curr_page_id},"pRow":JSON.stringify(pRow),"colName":imgId},//上传额外的post请求参数
//                showUpload: false, //是否显示上传按钮
                showRemove : false, //显示移除按钮
                showPreview : true, //是否显示预览
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: true,//是否显示拖拽区域
                maxFileCount: 10, //表示允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                validateInitialCount:true,
                overwriteInitial: false,//是否在上传下一个文件的时候覆盖前一个
                initialPreviewAsData: true,//实现初始化预览
                removeFromPreviewOnError:true,//碰到上传错误的文件，不显示在框内
                layoutTemplates:{
                    actionUpload:''    //设置为空可去掉上传按钮
                    //actionDelete:''  //设置为空可去掉删除按钮
                },
                initialPreview: initialPreview,//初始化预览文件的地址集合
                initialPreviewConfig:initialPreviewConfig//初始化预览文件配置
            }).on('filepreupload', function(event, data, previewId, index) {     //上传中
                var form = data.form, files = data.files, extra = data.extra,
                        response = data.response, reader = data.reader;
                console.log('文件正在上传');
            }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
                console.log('文件上传成功！');
                if(data.response['result'] === "success"){
                    var imageId = data.response['imageId'];
                    preImageList.push(imageId);
                    var preImageStr = preImageList.join(",");
                    $("#"+imgId).val(preImageStr);
                }else{
                    return false;
                }
            }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
                console.log('文件上传失败！');
            }).on('filesuccessremove', function(event, id) {
                console.log('文件删除');
            }).on('filedeleteerror', function(event, id) {
                console.log('文件删除错误');
            }).on('filedeleted', function(event, key,data) {
                //删除返回结果
                $("#"+imgId).val(data.responseJSON["imageIdStr"]);
                $('#dg').datagrid('reload');
            });
        }
    });
};

 /**
 * 显示图片
 * @param request
 * @return
 * @throws Exception
 */
@RequestMapping(value = {"/showPic.do", "showPic"})
public ResponseEntity<byte[]> showPic(HttpServletRequest request) throws Exception {
    HashMap<String, Object> hashMap = this.getHashMap(request);
    String imageId = (String) hashMap.get("image_id");
    Map<String, Object> imgConditions = new HashMap<>();
    imgConditions.put("image_id", imageId);
    Map<String, Object> imgInfo = tableService.getRecord(Arrays.asList("image_path", "uuid", "image_type"), TableConstant.TB_IMG, imgConditions);
    String imageType = (String) imgInfo.get("image_type");
    String fullPath = imgInfo.get("image_path") + (String) imgInfo.get("uuid") + "." + imageType;

    FileInputStream inputStream = new FileInputStream(fullPath);
    int available = inputStream.available();
    byte[] data = new byte[available];
    inputStream.read(data);
    inputStream.close();
    HttpHeaders he = new HttpHeaders();
    he.setContentType(MediaType.valueOf("image/" + imageType));
    log.info("imageId:" + imageId + "读取");
    return new ResponseEntity<>(data, he, HttpStatus.OK);
}


/**
 * 上传图片
 * @param file
 * @return
 */
@RequestMapping(value = "/uploadImg.do")
public @ResponseBody
Map<String, Object> upload(HttpServletRequest request,@RequestParam("file") MultipartFile file) {
    HashMap<String, Object> hashMap = this.getHashMap(request);
    String originalFilename = file.getOriginalFilename();
    Map<String, Object> pRowMap = JSON.parseObject(hashMap.get("pRow").toString(), Map.class);
    String colName = (String) hashMap.get("colName");
    Map<String, Object> result = new HashMap<>();
    result.put("result", "fail");
    if (StringUtils.isNotEmpty(originalFilename)) {
        String[] splitFileName = originalFilename.split("\\.");
        String uuid = UUIDUtil.getUUID();
        Map<String, Object> rowMap = new HashMap<>();

        if (!StringUtils.isEmpty(originalFilename)) {
            splitFileName = originalFilename.split("\\.");
            String refPageId = (String) hashMap.get("currPageId");
            Map<String, Object> pageCondition2 = new HashMap<>();
            pageCondition2.put("page_id", refPageId);
            pageCondition2.put("del_flag", 0);
            Map<String, Object> refPageInfo = tableService.getRecord(Arrays.asList("tb_name", "primary_key"), TableConstant.TB_PAGE, pageCondition2);

            String tbName = (String) refPageInfo.get("tb_name");
            String[] tbNameSpl = tbName.split("_");
            String middlePath = tbNameSpl[tbNameSpl.length - 1];
            String filePath = sysconfig.getProperties().get("image.path") +
                    "/" + middlePath +
                    "/" + DateUtil.format2str("yyyyMMdd") +
                    "/";
            rowMap.put("image_type", splitFileName[splitFileName.length - 1]);
            rowMap.put("image_path", filePath);
            rowMap.put("uuid", uuid);
            rowMap.put("image_name", originalFilename);
            rowMap.put("page_id", refPageId);
            Long incr = redisService.incr(sysconfig.getProperties().get("sys.id") + "_primary_key_" + refPageInfo.get("tb_name") + "_" + refPageInfo.get("primary_key"), 1);
            rowMap.put("image_id", incr);
            rowMap.put("col_name", colName);

            String primaryKey = (String) refPageInfo.get("primary_key");
            String pk = String.valueOf(pRowMap.get(primaryKey));
            rowMap.put("ref_value", pk);
            int ret = 0;
            try {

                ret = tableService.addRecord(TableConstant.TB_IMG, rowMap);
            } catch (Exception e) {
                String message = e.getMessage();
                if (message.contains("Duplicate entry")) {
                    log.info("主键冲突，redis刷新主键");
                    List<Map<String, Object>> recordsBySQL = tableService.getRecordsBySQL(String.format("select %s from %s order by %s desc limit 1", "image_id", TableConstant.TB_IMG, "image_id"));
                    for (Map<String, Object> objectMap : recordsBySQL) {
                        redisService.set(sysconfig.getProperties().get("sys.id") + "_primary_key_" + TableConstant.TB_IMG + "_" + "image_id", String.valueOf(Integer.parseInt(objectMap.get("image_id").toString())));
                    }
                    incr = redisService.incr(sysconfig.getProperties().get("sys.id") + "_primary_key_" + TableConstant.TB_IMG + "_" + "image_id", 1);
                    rowMap.put("image_id", incr);
                    ret = tableService.addRecord(TableConstant.TB_IMG, rowMap);
                }
            }

            if (ret > 0) {
                log.info(String.format("插入图片记录imageId:%s成功", incr));
                try {
                    boolean b = FileUtil.uploadFile(file.getBytes(), filePath, uuid + "." + splitFileName[1]);
                    if (b) {
                        log.info(String.format("插入图片imageId:%s成功", incr));
                        result.put("result", "success");
                        result.put("imageId", incr);
                    } else {
                        log.info(String.format("插入图片imageId:%s失败", incr));
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            } else {
                log.info(String.format("插入图片记录imageId:%s失败", incr));
            }
        }

        return result;
    }

    return result;
}


/**
 * 图片删除
 */
@RequestMapping(value = "deleteImg.do")
@ResponseBody
public Map<String, Object> deleteImg(HttpServletRequest request) {
    Map<String, Object> data = new HashMap<>();
    HashMap<String, Object> hashMap = this.getHashMap(request);
    String imageId = (String) hashMap.get("image_id");
    String pageId = (String) hashMap.get("currPageId");
    String updateCol = (String) hashMap.get("updateCol");
    Map<String, Object> pRowMap = JSON.parseObject(hashMap.get("pRow").toString(), Map.class);

    List<Map<String, Object>> records = tableService.getRecordsBySQL(String.format("select image_id,image_path,uuid,image_type from t_uls_image where image_id=%s", imageId));
    String imageIdStr = "";
    for (Map<String, Object> record : records) {
        String imagePath = (String) record.get("image_path");
        String uuid = (String) record.get("uuid");
        String imageType = (String) record.get("image_type");
        String path = imagePath + "/" + uuid + "." + imageType;
        File file = new File(path);
        if (file.exists()) {
            boolean delete = file.delete();
            if (delete) {
                log.info(String.format("图片imageId：%s删除成功", imageId));

                // 查找哪张表
                Map<String, Object> tableCondition = new HashMap<>();
                tableCondition.put("page_id", pageId);
                Map<String, Object> pageInfo = tableService.getRecord(Arrays.asList("tb_name", "primary_key"), TableConstant.TB_PAGE, tableCondition);

                String tbName = (String) pageInfo.get("tb_name");
                String primaryKey = (String) pageInfo.get("primary_key");
                String pk = String.valueOf(pRowMap.get(primaryKey));
                List<Map<String, Object>> recordsBySQL = tableService.getRecordsBySQL(String.format("select %s from %s where %s='%s'", updateCol, tbName, primaryKey, pk));
                for (Map<String, Object> objectMap : recordsBySQL) {
                    String o = String.valueOf(objectMap.get(updateCol));
                    String[] split = o.split(",");
                    List<String> strings = new ArrayList<>(Arrays.asList(split));
                    if(strings.contains(imageId)){
                        strings.remove(imageId);
                    }
                    imageIdStr = StringUtils.join(strings, ",");
                }
                tableService.updateRecordsBySQL(String.format("update %s set %s='%s' where %s='%s'", tbName, updateCol, imageIdStr, primaryKey, pk));
            } else {
                log.info(String.format("图片imageId：%s删除失败", imageId));
            }
        }
    }
    data.put("data", "success");
    data.put("imageIdStr", imageIdStr);
    return data;
}