BootstrapFileInput 图片上传默认显示功能

1.默认情况下我赋给这个组件的属性:

$(".myfile").fileinput({
            uploadUrl: ctx + "common/upload", //接受请求地址
            deleteUrl: ctx + "common/delete",
            uploadAsync : true, //默认异步上传
            showUpload : false, //是否显示上传按钮,跟随文本框的那个
            showRemove : false, //显示移除按钮,跟随文本框的那个
            showCaption : true,//是否显示标题,就是那个文本框
            showPreview : true, //是否显示预览,不写默认为true
            dropZoneEnabled : false,//是否显示拖拽区域,默认不写为true,但是会占用很大区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount : 1, //表示允许同时上传的最大文件个数
            enctype : 'multipart/form-data',
            validateInitialCount : true,
            previewFileIcon : "",
            msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
            allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
            allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
            allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
            language : 'zh',
            initialPreview: [
                "/profile/upload/2020/04/16/3f2ec280305390be676fdb815f5468c2.jpg",
            ],
        })
        //异步上传返回结果处理
        $('.myfile').on('fileerror', function(event, data, msg) {
            console.log("fileerror");
            alert(data);
        });
        //异步上传返回结果处理
        $(".myfile").on("fileuploaded", function(event, data) {
            if(data.response.code == 0){
                $('#imagePath').val(data.response.fileName);
            }
        });
        //上传前
        $('.myfile').on('filepreupload', function(event, data, previewId, index) {
            console.log("filepreupload");
        });

2.点击编辑,没有图片回显效果

BootstrapFileInput 图片上传默认显示功能_第1张图片
3.需加入组件属性:

initialPreviewAsData:true,

4.可显示

你可能感兴趣的:(Java,框架学习)