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

盐城小菜

已于 2024-07-23 08:59:29 修改

阅读量4.5k

点赞数 2

分类专栏： bootstrap 文章标签： bootstrap 前端 html

于 2022-02-17 15:39:45 首次发布

本文链接：https://blog.csdn.net/cai610182473/article/details/122984210

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在前端实现文件上传页面，支持图片、视频和PDF的预览，同时提供删除功能。通过FileVO类定义文件信息，JS代码展示了如何构建初始预览配置，以及处理文件上传、删除和移除的事件。使用了Krajee的文件输入插件，提供了不同类型的文件配置示例。

摘要由CSDN通过智能技术生成

实现效果,支持回显示图片,视频,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.com/file-input/plugin-options?#initialPreviewConfighttps://plugins.krajee.com/file-input/plugin-options?#initialPreviewConfig官方的示例:

initialPreview: [
    // IMAGE DATA
   'http://lorempixel.com/800/460/business/1',
    // IMAGE RAW MARKUP
    '<img src="http://lorempixel.com/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},
],