bootstrap-fileinput 多文件上传,显示,编辑回显,再次新增图片同时显示

实现效果,支持回显示 图片,视频,pdf

该页面是编辑回显的页面, 里面元素包括 图片,大小,名称,下载的按钮

文件删除功能

给前端的文件的信息类:

public class FileVO {
    //文件主键
	Integer id;
	//文件名称
	String name;
	//文件url
	String url;
	//文件大小
	String size;
    //缩率图  
	String thumbnailPic;
	//类型
	String type;
	 
}

删除图片文件删除的java代码就不提供了.就是传一个id,根据id删除,比较简单 

下面的js代码

<script th:inline="javascript">
        var prefix = ctx + "maintenance/instructions"
  

       var picList = [[${picList}]];
       var modeId = [[${modeId}]];
         
        var initialPreview = [] ;
        var initialPreviewConfig = [] ;
        for (var i = 0; i < picList.length; i++) {
            var fileName =  picList[i] ;
            if (fileName != null && fileName !=''){
                var delImg = new Object() ;
                delImg = generFilDel( fileName);
                
                initialPreview.push(fileName.url) ;
                initialPreviewConfig.push(delImg) ;
            }
        }
 
        function generFilDel(file) {
 
			if(file.type=='pdf'){
				return 	{type: "pdf", size: file.size, caption: file.name, url:prefix + "/deletePic", key: file.id, downloadUrl:file.url};
			}else if(file.type=='text'){
				return {caption: file.name, type: "text", size: file.size, url:prefix + "/deletePic", key: file.id , downloadUrl:file.url};
			}else if(file.type=='mp4'){
				return  {type: "video", size: file.size, filetype: "video/mp4", caption: file.name, url:prefix + "/deletePic", key: file.id , downloadUrl:file.url};
			}else{
				return	{caption: file.name, size: file.size, url: prefix + "/deletePic", key: file.id};
			}
        }
        
        $(".file-upload").fileinput({
            uploadUrl: prefix + '/upload',
            maxFileCount: 5,
            autoReplace: true,
            showClose: false, //隐藏右上角叉
            showRemove: false, //隐藏清除按钮
            uploadExtraData: { modeId:modeId },
        	initialPreview: initialPreview,
         	initialPreviewConfig: initialPreviewConfig,
			initialPreviewAsData: true, // defaults markup
            fileSizeGetter:true,
            overwriteInitial:false
        
         }).on('fileuploaded', function (event, data, previewId, index) {
        	 // 文件上传完成
            picList.push({'key':data.response.data.id,'url':data.response.data.url});
        	 
        }).on('filesuccessremove', function (event, data, previewId, index) {
        	// 上传完成后, 移除成功通知
			for (var i = 0; i < picList.length; i++) { 
			      if (picList[i].name== data) { 
 			          delete picList[i]; 
			      } 
			   }                 	
         }).on('fileremoved', function (event, data, previewId, index) {
        	 
         })
         
         
         
    </script>

更多详细的,跳转官方文档上去看看  详细介绍方式说明: initialPreviewConfig 

https://plugins.krajee/file-input/plugin-options?#initialPreviewConfighttps://plugins.krajee/file-input/plugin-options?#initialPreviewConfig官方的示例:

initialPreview: [
    // IMAGE DATA
   'http://lorempixel/800/460/business/1',
    // IMAGE RAW MARKUP
    '<img src="http://lorempixel/800/460/business/2" class="kv-preview-data file-preview-image" style="height:160px">',
    // TEXT DATA
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut mauris ut libero fermentum feugiat eu et dui. Mauris condimentum rhoncus enim, sed semper neque vestibulum id. Nulla semper, turpis ut consequat imperdiet, enim turpis aliquet orci, eget venenatis elit sapien non ante. Aliquam neque ipsum, rhoncus id ipsum et, volutpat tincidunt augue. Maecenas dolor libero, gravida nec est at, commodo tempor massa. Sed id feugiat massa. Pellentesque at est eu ante aliquam viverra ac sed est.",
    // PDF DATA
    'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
    // VIDEO DATA
    "https://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4",
],
initialPreviewAsData: true, // defaults markup
initialPreviewConfig: [
    {caption: "Business 1.jpg", size: 762980, url: "$urlD", key: 11},
    {previewAsData: false, size: 823782, caption: "Business 2.jpg", url: "$urlD", key: 13},
    {caption: "Lorem Ipsum.txt", type: "text", size: 1430, url: "$urlD", key: 12},
    {type: "pdf", size: 8000, caption: "PDF Sample.pdf", url: "$urlD", key: 14},
    {type: "video", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "$urlD", key: 15},
],