Question

我有一个简单的HTML表单，可以填写该表单，并通过POST方法通过电子邮件发送信息。我最近在表单中添加了文件上传-如果我不使用Javascript / jQuery进行检查，则提交正常，文件上传没有问题。但是，如果我使用jQuery验证，则表单将以成功消息作为响应，并且收到电子邮件，则所有信息都存在，但是文件上传失败。

表格：

<form class="smtcheck" style="font-family: Arial;" action="https://myurl.co.uk/emails/smt.php" method="post" enctype="multipart/form-data">
    <div class="formname" style="font-family: Arial;"><select style="font-family: Arial;" name="title">
    <option style="font-family: Arial;" selected="selected" disabled="disabled" value="">Title</option>
    <option style="font-family: Arial;" value="Mr">Mr</option>
    <option style="font-family: Arial;" value="Miss">Miss</option>
    <option style="font-family: Arial;" value="Mrs">Mrs</option>
    <option style="font-family: Arial;" value="Ms">Ms</option>
    <option style="font-family: Arial;" value="Sir">Sir</option>
    <option style="font-family: Arial;" value="Dr">Dr</option>
    <option style="font-family: Arial;" value="Mx">Mx</option>
    </select><input class="wipe" style="font-family: Arial;" type="text" name="name" placeholder="Full Name*" required=""></div>
    <input class="wipe" style="font-family: Arial;" type="text" name="email" placeholder="Email Address*" required="">
    <input class="wipe" style="font-family: Arial;" type="text" name="phone" value="Phone Number*" required="">
    <input class="wipe" style="font-family: Arial;" type="text" name="make" value="Make*" required="">
    <input class="wipe" style="font-family: Arial;" type="text" name="model" value="Model">
    <input class="wipe" style="font-family: Arial;" type="text" name="age" value="Age">
    <input class="wipe" style="font-family: Arial;" type="text" name="serial" value="Serial No">
    <input type="file" name="imgup" id="imgup">
    <input class="right" style="font-family: Arial;" type="submit" value="SEND"></form>

jQuery：

jQuery(document).ready(function(){


    $(document).on("click","span.close",function(){$(this).parent().slideUp(300)})





    $('.smtcheck').submit(function(e){





        e.preventDefault();





        var error = false;


        var name = $("input[name='name']").val();

        var email = $("input[name='email']").val();

        var phone = $("input[name='phone']").val();

        var make = $("input[name='make']").val();



        if(name.length == 0){


        var error = true;


        var name = $("input[name='name']").addClass("error");
        alert("Please ensure you have filled out your name.");


        }else{

        var error = false;
        $("input[name='name']").removeClass("error");


        }





        if(make.length == 0){


        var error = true;


        var make = $("input[name='make']").addClass("error");
        alert("Please ensure you have filled out your trailer make.");


        }else{

        var error = false;
        $("input[name='make']").removeClass("error");


        }


        if(phone.length == 0){


        var error = true;


        var phone = $("input[name='phone']").addClass("error");
        alert("Please ensure you have filled out your phone number.");


        }else{

        var error = false;
        $("input[name='phone']").removeClass("error");


        }



        if(email.length == 0 || email.indexOf('@') == '-1'){


        var error = true;


        var email = $("input[name='email']").addClass("error");
        alert("Please ensure you have filled out your email.");


        }else{

        var error = false;
        $("input[name='email']").removeClass("error");


        }

        if(error == false){





        $.post("https://myurl.co.uk/emails/smt.php", $(".smtcheck").serialize(),function(result){





        if (result) {


                           $("input[type=submit]").remove();


                           $('.formresponse').show();


                            }else{


                            alert("Please ensure you have filled out all the required fields and try again.");


                        }

                        return false;
                    });


                }


    }); 


});

我从未尝试过提交多部分表单的AJAX提交，因此不确定为什么文件无法通过jQuery验证上传吗？

Answer 1

var frm = $(document.formname);
var jdata = JSON.stringify(frm.serializeArray());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这将序列化除文件输入之外的所有输入值。如果要执行此操作，请使用ajax之类的表单提交，

$(document).on("submit", "form#formname", function (event) {
        event.preventDefault();
        if ($("#formname").validationEngine('validate')) {
            $('.loader').show();
            $.ajax({
                url: $(this).attr("action"),
                type: $(this).attr("method"),
                dataType: "JSON",
                data: new FormData(this),
                processData: false,
                contentType: false,
                success: function (result) {
                },
                error: function (xhr, desc, err) {
                }
            });
        }
    });

如果需要，您可以在ajax成功/错误中显示任何成功的错误消息

多部分表单提交并发送电子邮件，但通过jQuery检查文件上传失败

1 个答案: