Bootstrap fileinput layoutTemplates内 去掉缩略图下的上传按钮 及其他按钮或元素 也可重写指定元素 添加自定义图标等

参考  https://zhidao.baidu.com/question/2143865137819906308.html

 

上传小图标，用多文件同步上传的时候，有这个小图标操作的时候会出现各种情况，现在要把他们弄掉：

    

 

这里layoutTemplates为上传控件模板，可以在这里重写上传控件中的其他元素样式(空字符串表示无样式)：

<script type="text/javascript">
    $(document).ready(function () {
	$("#fileinputId").fileinput({
		'theme': 'explorer-fas',	
                layoutTemplates :{
		    //footer:'',//隐藏全部小图标；
		    actionUpload:'',//去除上传预览缩略图中的上传图片；
                    // indicator:'', //去除上传状态图标(左侧➕)
                    // actionDrag:'',//去除拖动图标(通常编辑的时候会显示这个图标)
	//其他 参考fileinput.js/fileinput.min.js中 搜索 layoutTemplates，可以看到模板内所有元素  需要改哪个，直接在这里赋空字符串就行了

	        },
		'uploadUrl': "file/uploadToServer",//后端文件上传URL，文件参数使用html中的input，对应name为file
		uploadExtraData: {'a':'参数a','b':'参数b'},//后端文件上传URL相关参数(不包含附件)
		overwriteInitial: false,
		uploadAsync:false, //默认true 异步提交
		initialPreviewAsData: true,
		initialPreview: [
			// "http://demo.ruoyi.vip/img/profile.jpg",
			// "http://demo.ruoyi.vip/img/profile.jpg",
		]
	}).on('fileprepload', function(event, jsonData, previewId, index) {
		alert("异步单文件上传成功");
	}).on('filebatchuploadsuccess', function(event, jsonData, previewId, index) {
		alert("同步多文件上传成功");
	}).on('filebatchuploaderror', function(event, data, msg) {
		alert("上传失败");
	}).on("filepredelete",function (event,key) {
		return !confirm("确定删除？");
	});
});
</script>

 

------------------------------------------------------------

没去官网看文档，就直接自己顺着代码找一下吧：

上文js代码段中从$("#fileinputId").fileinput()  找到 layoutTemplates点进去fileinput.min.js源文件

文件是 xx.min.js 压缩文件，好，control+A 全文复制，网上找一个js解压网站，放入源码格式化一下，获得js代码(这里只展示layoutTemplates下代码)；这里所有的key对应的值为动态生成的上传控件中的各元素样式

layoutTemplates: {
	main1: '{preview}\n<div class="kv-upload-progress kv-hidden"></div><div class="clearfix"></div>\n<div class="input-group {class}">\n  {caption}\n<div class="input-group-btn input-group-append">\n      {remove}\n      {cancel}\n      {upload}\n      {browse}\n    </div>\n</div>',
	main2: '{preview}\n<div class="kv-upload-progress kv-hidden"></div>\n<div class="clearfix"></div>\n{remove}\n{cancel}\n{upload}\n{browse}\n',
	preview: '<div class="file-preview {class}">\n    {close}    <div class="{dropClass}">\n    <div class="file-preview-thumbnails">\n    </div>\n    <div class="clearfix"></div>    <div class="file-preview-status text-center text-success"></div>\n    <div class="kv-fileinput-error"></div>\n    </div>\n</div>',
	close: i,
	fileIcon: '<i class="glyphicon glyphicon-file"></i>',
	caption: '<div class="file-caption form-control {class}" tabindex="500">\n  <span class="file-caption-icon"></span>\n  <input class="file-caption-name" onkeydown="return false;" onpaste="return false;">\n</div>',
	modalMain: a,
	modal: '<div class="modal-dialog modal-lg{rtl}" role="document">\n  <div class="modal-content">\n    <div class="modal-header">\n      <h5 class="modal-title">{heading}</h5>\n      <span class="kv-zoom-title"></span>\n      <div class="kv-zoom-actions">{toggleheader}{fullscreen}{borderless}{close}</div>\n    </div>\n    <div class="modal-body">\n      <div class="floating-buttons"></div>\n      <div class="kv-zoom-body file-zoom-content {zoomFrameClass}"></div>\n{prev} {next}\n    </div>\n  </div>\n</div>\n',
	progress: '<div class="progress">\n    <div class="{class}" role="progressbar" aria-valuenow="{percent}" aria-valuemin="0" aria-valuemax="100" style="width:{percent}%;">\n        {status}\n     </div>\n</div>',
	size: " <samp>({sizeText})</samp>",
	footer: '<div class="file-thumbnail-footer">\n    <div class="file-footer-caption" title="{caption}">\n        <div class="file-caption-info">{caption}</div>\n        <div class="file-size-info">{size}</div>\n    </div>\n    {progress}\n{indicator}\n{actions}\n</div>',
	indicator: '<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>',
	actions: '<div class="file-actions">\n    <div class="file-footer-buttons">\n        {download} {upload} {delete} {zoom} {other}    </div>\n</div>\n{drag}\n<div class="clearfix"></div>',
	actionDelete: '<button type="button" class="kv-file-remove {removeClass}" title="{removeTitle}" {dataUrl}{dataKey}>{removeIcon}</button>\n',
	actionUpload: '<button type="button" class="kv-file-upload {uploadClass}" title="{uploadTitle}">{uploadIcon}</button>',
	actionDownload: '<a class="kv-file-download {downloadClass}" title="{downloadTitle}" href="{downloadUrl}" download="{caption}" target="_blank">{downloadIcon}</a>',
	actionZoom: '<button type="button" class="kv-file-zoom {zoomClass}" title="{zoomTitle}">{zoomIcon}</button>',
	actionDrag: '<span class="file-drag-handle {dragClass}" title="{dragTitle}">{dragIcon}</span>',
	btnDefault: '<button type="{type}" tabindex="500" title="{title}" class="{css}" {status}>{icon} {label}</button>',
	btnLink: '<a href="{href}" tabindex="500" title="{title}" class="{css}" {status}>{icon} {label}</a>',
	btnBrowse: '<div tabindex="500" class="{css}" {status}>{icon} {label}</div>',
	zoomCache: '<div class="kv-zoom-cache" style="display:none">{zoomContent}</div>'
},

根据单词挨个匹配吧，这里只匹配了几个  其他的自行探索

main1
main2
preview
close
fileIcon
caption
modalMain
modal
progress
size
footer # 底部所有元素 (包含所有图标)
indicator #「➕图标」
actions
actionDelete # 「删除图标」
actionUpload #「上传图标」
actionDownload
actionZoom
actionDrag # 图片回显，编辑时候显示的「拖动图标」
btnDefault
btnLink
btnBrowse
zoomCache

------------------------------------------------------------

最快的方式就是，上传页面F12审查元素，指针点到对应元素，复制class名，到上面的js代码段里搜一下，对应的key放到页面js的layoutTemplates下就行了

 

layoutTemplates: {
   actionDelete: '',//去掉删除图标
},

 

------------------------------------------------------------

还可以自定义添加元素覆盖掉现有元素

layoutTemplates: {
   actionUpload: '<a>测试</a>',//重写上传按钮元素
},