使用 bootstrap-fileinput-js 进行文件上传

使用 bootstrap-fileinput-js 进行文件上传

上传文件同时想上传表单数据？

可以通过初始化配置来实现，具体在代码里的 uploadExtraData 中体现。

$("#imgFile").fileinput({
        showUpload:false,
        'theme': 'explorer-fas',
        'uploadUrl': prefix + '/edit',
        uploadAsync: false,
        maxFileCount: 1,
        enctype:'multipart/form-data',
        uploadExtraData: function () { // 在这里返回随文件一起上传的表单数据
            var data={
                liHuiId:$("#liHuiId").val(),
                name:$("#name").val(),
                total:$("#total").val(),
                description:$("#description").val(),
                probability:$("#probability").val(),
                status:$("#status").val(),
                beforeImgFile:$("#beforeImgFile").val(),
                extractNum:$("#extractNum").val()
            }
            return data;
        }
    }).on('filebatchuploadsuccess',function (event,data,previewId,index) {	// 同步上传成功之后回调
        $.operate.successCallback({
            code:0,
            msg:'操作成功'
        });
    });

    function submitHandler() {
        if ($.validate.form()) {
            //$.operate.save(prefix + "/add", $('#form-user-add').serialize());
            $("#imgFile").fileinput("upload");
        }

    }

input:

<input type="file" class="form-control-file" id="imgFile" name="imgFile" placeholder="选择图片" accept="image/jpeg">

需要：

<div th:fragment="bootstrap-fileinput-css">
    <link th:href="@{/ajax/libs/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet"/>
</div>
<div th:fragment="bootstrap-fileinput-js">
    <script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.min.js}"></script>
</div>

效果：