ajax方式提交form表单校验上传的文件不能为空

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/wxwsfl/article/details/87973936

jsp中：

<form id="inputForm" method="post" enctype="multipart/form-data">
    <div>
        <label>文件1上传：</label>
        <div>
            <input type="file" name="uploadFiles1">
        </div>
    </div>

    <div>
        <label>文件2上传：</label>
        <div>
            <input type="file"  name="uploadFiles2">
        </div>
    </div>
</form>

js中：

使用jQuery.validate插件校验，当节点的name相同时候，会忽略剩余节点，导致所有相关节点的errMsg都显示在第一个节点上。

所以此处使用2个命名。

var validator;
$(function () {
    validator = $("#inputForm").validate({
        rules: {
            uploadFiles1: {
                required: true
            }，uploadFiles2: { 
                required: true 
            }
        }
    });

    $('#inputForm').submit(function () {
        $(this).ajaxSubmit({
            url: "${ctx}/.../...",
            beforeSubmit: showRequest, //提交前处理
            success: showResponse, //处理完成
            error: showResponse,
            resetForm: true,
            dataType: 'json'
        });
        return false;//防止dialog 自动关闭
    });
})

//提交前的一些校验
function showRequest() {
    if (!validator.form()) {
        validator.focusInvalid();
        return false;
    }
    swal({
        title: "正在处理,请稍后...",
        text: "请不要关闭浏览器...",
        type: "warning",
        timer: 300000,
        showConfirmButton: false
    });
}


//执行成功回调函数
function showResponse(data) {
    if (data.resCode == '0') {
        swal({
            title: "操作成功",
            text: "",
            type: "success",
            showConfirmButton: true
        }, function () {
            window.location.href = "${ctx}/...
        });
    } else {
        swal({
            title: data.msg,
            text: "",
            type: "error"
        });
    }
}

后台：

    @ResponseBody
    @RequestMapping("/save")
    public Result save(MultipartFile uploadFiles1, MultipartFile uploadFiles2){
        MultipartFile[] files = {uploadFiles1, uploadFiles2};
    }