【技术】若依框架的文件上传组件（bootstrap-fileinput）

Riu_Peter

已于 2022-07-17 18:20:02 修改

阅读量7.2k

点赞数 8

分类专栏： Spring Boot Web 文章标签： bootstrap javascript 前端若依

于 2022-05-18 19:00:27 首次发布

本文链接：https://blog.csdn.net/m0_43453853/article/details/124848536

版权

Spring Boot 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Web

10 篇文章 0 订阅

订阅专栏

若依框架的文件上传组件

引入组件
基础用法
特殊用法
配置项
方法配置

引入组件

<th:block th:include="include :: bootstrap-fileinput-css" />
<th:block th:include="include :: bootstrap-fileinput-js" />

基础用法

以下是官网给的案例，详细参数去【若依官网文档】查看

<!DOCTYPE html>
<html lang="zh">
<head>
	<th:block th:include="include :: header('文件上传')" />
	<th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>文件上传控件 <small>https://github.com/kartik-v/bootstrap-fileinput</small></h5>
                    </div>
                    <div class="ibox-content">
                    	<div class="form-group">
                            <label class="font-noraml">单文件上传</label>
	                        <div class="file-loading">
					            <input id="singleFile" name="file" type="file">
					        </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="font-noraml">多文件上传</label>
	                        <div class="file-loading">
					            <input id="multipleFile" name="files" type="file" multiple>
					        </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label class="font-noraml">相关参数详细信息</label>
                            <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-fileinput" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-fileinput</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
    
    $(document).ready(function () {
    	// 单图上传
    	$("#singleFile").fileinput({
            uploadUrl: ctx + 'common/upload',
            maxFileCount: 1,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
        	var rsp = data.response;
            log.info("return url：" + rsp.url)
            log.info("reutrn fileName：" + rsp.fileName)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })
        
        // 多图上传
        $("#multipleFile").fileinput({
            uploadUrl: ctx + 'common/uploads',
            uploadAsync: false
        }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
        	var rsp = data.response;
        	log.info("return urls：" + rsp.urls)
            log.info("reutrn fileNames：" + rsp.fileNames)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })
    });
    </script>
</body>
</html>

特殊用法

文件上传组件默认单独上传之后，在点击提交表单。但是有些情况下我们需要带着文件和表单数据。

固定参数

<script th:inline="javascript">
    //点击表单的提交按钮调用该方法
    function submitHandler() {
        if ($.validate.form()) {
            $("#multipleFile").fileinput("upload");
        }
    }
	// 多文件上传
    $("#multipleFile").fileinput({
        uploadUrl: prefix + '/uploadBatch', // 这里是控制层的路径，该路径接收文件和数据
        uploadAsync: false,
        showUpload: false, // 由于是提交表单上传，这里禁用掉上传按钮
        layoutTemplates: {actionUpload: ''}, // 由于是提交表单上传，这里禁用掉每个组件的上传按钮
        uploadExtraData:{
            name: 'value' // 这里是上传文件携带的其他参数，默认情况下只支持固定参数
        }
    }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
        // 控制层返回的JSON数据
        var rsp = data.response;
        // 这里可以根据返回的数据进行额外处理
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
    })
</script>

动态参数

适用于手动输入数据 + 提交文件需求

<script th:inline="javascript">
    //点击表单的提交按钮调用该方法
    function submitHandler() {
        if ($.validate.form()) {
            $("#multipleFile").fileinput("upload");
        }
    }
	// 多文件上传
    $("#multipleFile").fileinput({
        uploadUrl: prefix + '/uploadBatch', // 这里是控制层的路径，该路径接收文件和数据
        uploadAsync: false,
        showUpload: false, // 由于是提交表单上传，这里禁用掉上传按钮
        layoutTemplates: {actionUpload: ''}, // 由于是提交表单上传，这里禁用掉每个组件的上传按钮
        // 动态参数写法，缩略图预览和索引作为参数
        uploadExtraData: function(previewId, index){
        	// 参数对象
            var data = {};
			data.key = $("").val();
			return data;
        }
    }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
        // 控制层返回的JSON数据
        var rsp = data.response;
        // 这里可以根据返回的数据进行额外处理
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
    })
</script>

配置项


属性	类型	默认值	描述
language	String	‘en’	多语言设置，使用时需提前引入locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后
showCaption	Boolean	true	是否显示被选文件的简介
showBrowse	Boolean	true	是否显示浏览按钮
showPreview	Boolean	true	是否显示预览区域
showRemove	Boolean	true	是否显示移除按钮
showUpload	Boolean	true	是否显示上传按钮
showCancel	Boolean	true	是否显示取消按钮
showClose	Boolean	true	是否显示关闭按钮
showUploadedThumbs	Boolean	true	这个属性是基于这样一个使用方法的：选择若干个文件后点击右下角上传按钮批量上传，待全部完成后再选择一批文件，此时之前上传成功的文件是否要保存。就是这个属性控制的。注意，点击文件缩略图下面的上传按钮不会导致之前的成功上传的文件消失，即使这里设置了true
browseOnZoneClick	Boolean	false
autoReplace	Boolean	false	是否自动替换当前图片，设置为true时，再次选择文件，会将当前的文件替换掉。
generateFileId	Object	null
previewClass	String	空	添加预览按钮的类属性
captionClass	String	空	添加标题类属性
frameClass	String	‘krajee-default’	针对每个缩略图的框架
mainClass	String	‘file-caption-main’	针对元素类属性
mainTemplate	Object	null
purifyHtml	Boolean	true
fileSizeGetter	Object	null
initialCaption	String	空
initialPreview	Array/Object	[]	通过这个参数，我们可以为文件区设置一些默认的缩略图
initialPreviewDelimiter	String	‘$$’
initialPreviewAsData	Boolean	false
initialPreviewFileType	String	‘image’
initialPreviewConfig	Array/Object	[]
initialPreviewThumbTags	Array/Object	[]
previewThumbTags	Object	{}
initialPreviewShowDelete	Boolean	true
removeFromPreviewOnError	Boolean	false
deleteUrl	String	空	删除图片时的请求路径
deleteExtraData	Object	{}	删除图片时额外传入的参数
overwriteInitial	Boolean	true
previewZoomButtonIcons	Object	{prev: ‘’,next: ‘’,toggleheader: ‘’,fullscreen: ‘’,borderless: ‘’,close: ‘’},
previewZoomButtonClasses	Object	{prev: ‘btn btn-navigate’,next: ‘btn btn-navigate’,toggleheader: ‘btn btn-default btn-header-toggle’,fullscreen: ‘btn btn-default’,borderless: ‘btn btn-default’,close: ‘btn btn-default’},
preferIconicPreview	Boolean	false
preferIconicZoomPreview	Boolean	false
allowedPreviewTypes	undefined	undefined
allowedPreviewMimeTypes	Object	null
allowedFileTypes	Object	null	接收的文件后缀，如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型
allowedFileExtensions	Object	null	指出带有哪些后缀名的文件才是被接受上传的，设置msgInvalidFileExtension可以个性化出现此错误时的错误信息
defaultPreviewContent	Object	null
customLayoutTags	Object	{}
customPreviewTags	Object	{}
layoutTemplates	Object	{actionUpload: ‘’,actionZoom: ‘’,actionDownload: ‘’,actionDelete: ‘’}	渲染布局的每个部分的模板配置
previewFileIcon	String	空	当文件无法被预览时出现在缩略图中的图标，默认是
previewFileIconClass	String	‘file-other-icon’
previewFileIconSettings	Object	{}	可以将不同的后缀的文件有不同的缩略图图标
previewFileExtSettings	Object	{}
buttonLabelClass	String	‘hidden-xs’
browseIcon	String	空
browseClass	String	‘btn btn-primary’	指出了右下角选择按钮的样式。一般尽量不要用btn-sm和btn-lg，会和左边的输入框不协调
removeIcon	String	空	删除按钮相关的属性
removeClass	String	‘btn btn-default’
cancelIcon	String	空
cancelClass	String	‘btn btn-default’
uploadIcon	String	空	上传按钮相关的属性
uploadClass	String	‘btn btn-default’
uploadUrl	String	null	上传文件路径
uploadAsync	boolean	true	是否为异步上传
uploadExtraData	Object	{}	上传文件时额外传递的参数设置
zoomModalHeight	number	480
minImageWidth	String	null	图片的最小宽度
minImageHeight	String	null	图片的最小高度
maxImageWidth	String	null	图片的最大宽度
maxImageHeight	String	null	图片的最大高度
resizeImage	Boolean	false
resizePreference	String	‘width’
resizeQuality	number	0.92
resizeDefaultImageType	String	‘image/jpeg’
minFileSize	number	0	单位为kb，上传文件的最小大小值
maxFileSize	number	0	单位为kb，如果为0表示不限制文件大小
resizeDefaultImageType	number	25600(25MB)
minFileCount	number	0	表示同时最小上传的文件个数
maxFileCount	number	0	表示允许同时上传的最大文件个数
validateInitialCount	Boolean	false
msgValidationErrorClass	String	‘text-danger’
msgValidationErrorIcon	String	空
msgErrorClass	String	‘file-error-message’
progressThumbClass	String	“progress-bar progress-bar-success progress-bar-striped active”
rogressClass	String	“progress-bar progress-bar-success progress-bar-striped active”
progressCompleteClass	String	“progress-bar progress-bar-success”
progressErrorClass	String	“progress-bar progress-bar-danger”
progressUploadThreshold	number	99
previewFileType	String	‘image’	预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式
elCaptionContainer	String	null
elCaptionText	String	null	设置标题栏提示信息
elPreviewContainer	String	null
elPreviewImage	String	null
elPreviewStatus	String	null
elErrorContainer	String	null
errorCloseButton	String	×’
slugCallback	function	null	选择后未上传前回调方法
dropZoneEnabled	Boolean	true	是否显示拖拽区域
dropZoneTitleClass	String	‘file-drop-zone-title’	拖拽区域类属性设置
fileActionSettings	Object	{}	设置预览图片的显示样式
otherActionButtons	String	空	编码设置
textEncoding	String	‘UTF-8’
ajaxSettings	Object	{}
ajaxDeleteSettings	Object	{}
showAjaxErrorDetails	Boolean	true

方法配置

方法名	描述
fileerror	异步上传错误结果处理$(‘#uploadfile’).on(‘fileerror’, function(event, data, msg) {});
fileuploaded	异步上传成功结果处理$(“#uploadfile”).on(“fileuploaded”, function (event, data, previewId, index) {})
filebatchuploaderror	批量上传错误结果处理$(‘#uploadfile’).on(‘filebatchuploaderror’, function(event, data, msg) {});
filebatchuploadsuccess	批量上传成功结果处理$(‘#uploadfile’).on(‘filepreupload’, function(event, data, previewId, index) {});
filebatchselected	选择文件后处理事件$(“#fileinput”).on(“filebatchselected”, function(event, files) {});
upload	文件上传方法$(“#fileinput”).fileinput(“upload”);
fileuploaded	上传成功后处理方法$(“#fileinput”).on(“fileuploaded”, function(event, data, previewId, index) {});
filereset	Possible values: http, https, ws, wss.
fileclear	点击浏览框右上角X 清空文件前响应事件$(“#fileinput”).on(“fileclear”,function(event, data, msg){});
filecleared	点击浏览框右上角X 清空文件后响应事件$(“#fileinput”).on(“filecleared”,function(event, data, msg){});
fileimageuploaded	在预览框中图片已经完全加载完毕后回调的事件

Riu_Peter

关注

8
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
【技术】若依框架的文件上传组件（bootstrap-fileinput）

若依框架的文件上传组件引入组件基础用法特殊用法配置项方法配置引入组件<th:block th:include="include :: bootstrap-fileinput-css" /><th:block th:include="include :: bootstrap-fileinput-js" />基础用法以下是官网给的案例，详细参数去【若依官网文档】查看<!DOCTYPE html><html lang="zh"><head&g
复制链接

扫一扫