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

最新推荐文章于 2024-06-05 11:25:24 发布

今天天气不错丶

最新推荐文章于 2024-06-05 11:25:24 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web应用

本文链接：https://blog.youkuaiyun.com/wxwsfl/article/details/87973936

Web应用专栏收录该内容

8 篇文章

订阅专栏

本文介绍在JSP中实现多文件上传的方法，并使用jQuery.validate插件进行表单验证，解决同名节点被忽略的问题，确保每个上传字段都能正确验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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