bootstrap-fileinput 表单同步提交

 

先看基本的教程及API，我就不重复了，直接上干货。https://www.cnblogs.com/parker-yu/p/7207071.html

仅仅是个简单的示例，文件数量  类型等限制都没有加。。。。

我的框架是springboot+thymeleaf

1、HTML

<div class="form-group">
    <label class="col-sm-3 control-label">文件路径：</label>
    <div class="col-sm-8">
        <div class="file-loading">
            <input id="fileinput-demo-1" name="files" type="file" multiple>
        </div>
    </div>
</div>

 

2、js

下面这个是控件初始化

$(document).ready(function () {
    $("#fileinput-demo-1").fileinput({
        'theme': 'explorer-fas',
        'uploadUrl': '/common/uploadFiles',
        uploadExtraData: {'directory':'news'},
        overwriteInitial: false,
        showPreview:false,
        showUpload: false,
        uploadAsync:false, //false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口
        previewClass:"uploadPreview"
    }).on("change", function() {
        // 清除掉上次上传的图片
        $(".uploadPreview").find(".file-preview-frame:first").remove();
        $(".uploadPreview").find(".kv-zoom-cache:first").remove();
    }).on("filebatchselected", function(e, files) {
            //$(this).fileinput("upload");             // 文件选择完直接调用上传方法。
    }).on('filebatchuploadsuccess',function(event,data,previewId,index) {
        console.log(data);
    });
});

3、form表单提交

function submitHandler() {
    if ($.validate.form()) {
        // 上传文件
        $("#fileinput-demo-1").fileinput("upload");
    }
}

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

划重点

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

1  使用同步提交    设置 uploadAsync:false

2  上传文件  在表单提交后，进行完表单验证后，手动提交上传文件  $("#fileinput-demo-1").fileinput("upload");

3  文件上传成功后的处理

on('filebatchuploadsuccess',function(event,data,previewId,index) { console.log(data); })