Bootstrap-fileinput插件文件上传与图片回显

1.所需硬件

css文件上传样式:<th:block th:include=“include :: bootstrap-fileinput-css” />
js文件上传行为:<th:block th:include=“include :: bootstrap-fileinput-js” />

2.其他软件

控制层upload接口方法调用:

@PostMapping("/upload")
	@ResponseBody
	   public AjaxResult uploadFile(MultipartFile file) throws Exception
    {
        try
        {
            // 上传文件路径
            String filePath = Global.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("fileName", fileName);
            ajax.put("url", url);
            return ajax;
        }
        catch (Exception e)
        {
            return AjaxResult.error(e.getMessage());
        }
    }

Html页面add.html图片上传控件写法:

---

<div class="row">
                <div class="col-sm-12">
                    <input id="fileinput-demo-1" name="file" type="file" multiple>
                </div>
            </div>

js写法:

//************************图片start************************
		$(document).ready(function () {
            $("#fileinput-demo-1").fileinput({
            	//初始化上传文件框
            	theme: 'explorer-fas',
            	language: 'zh', //设置语言
            	dropZoneTitle: '可以将图片拖放到这里 …支持文件上传',
                theme: 'explorer-fas',
                uploadUrl: prefix +'/upload',
                enctype: 'multipart/form-data',
                overwriteInitial: false,
                initialPreviewAsData: true,
                initialPreview: [
                    //"/img/profile.jpg"
                ],
                allowedFileExtensions: ['jpg', 'gif', 'png'],
                showUpload: true,//显示整体上传的按钮
                autoReplace:true,
                minFileCount:1,
                maxFileCount:1,
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                layoutTemplates :{
               		actionUpload:''//去除上传预览缩略图中的上传图片
               	},
                showUploadedThumbs: false
            });

            $("#fileinput-demo-1").on("fileuploaded", function (event, data, previewId, index) {
                if(data.response.code == 0){
                    $('#imagePath').val(data.response.fileName);
                }
            });
        });
    	//************************图片end************************

imagePath为实体类的一个属性对应的输入框的id，用来存储图片路径。
Html页面edit.html图片回显js写法:

//************************图片start************************
		$(document).ready(function () {				
            $("#fileinput-demo-1").fileinput({
            	//初始化上传文件框
            	theme: 'explorer-fas',
            	language: 'zh', //设置语言
            	dropZoneTitle: '可以将图片拖放到这里 …支持文件上传',
                theme: 'explorer-fas',
                uploadUrl: prefix +'/upload',
                enctype: 'multipart/form-data',
                overwriteInitial: false,
                initialPreviewAsData: true,
                initialPreview: [
                           '[[${实体类.imagePath}]]'
             	                ],
                allowedFileExtensions: ['jpg', 'gif', 'png'],
                showUpload: true,//显示整体上传的按钮
                autoReplace:true,
                minFileCount:1,
                maxFileCount:1,
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                layoutTemplates :{
               		actionUpload:'',//去除上传预览缩略图中的上传图片
                    //actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
                    //actionDownload:'' //去除上传预览缩略图中的下载图标
                    actionDelete:'', //去除上传预览的缩略图中的删除图标
               	},
                showUploadedThumbs: false
            });

            $("#fileinput-demo-1").on("fileuploaded", function (event, data, previewId, index) {
                if(data.response.code == 0){
                    $('#imagePath').val(data.response.fileName);
                }
            });
            $("#fileinput-demo-1").on('filedeleted', function(event, id) {
                alert('文件删除');
            })                      
         	}); 	
            //************************图片end************************

题主在这上面耗的时间可不短，看网上initialpreview都要加ctx，加上这个反而回显不了图片，坑啊！