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};
    }

猜你喜欢

转载自blog.csdn.net/wxwsfl/article/details/87973936

相关文章