若依框架的文件上传组件
引入组件基础用法特殊用法配置项方法配置引入组件
<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>/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>
