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

本文主要是介绍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为fileuploadExtraData: {'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>',//重写上传按钮元素
},

 

 

 

 

 

这篇关于Bootstrap fileinput layoutTemplates内 去掉缩略图下的上传按钮 及其他按钮或元素 也可重写指定元素 添加自定义图标等的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---