jQuery validate插件中的文件上传问题

Question

我有一个使用jQuery.validate.js插件来验证和提交表单的表单。 该表格包含文件上传。

我想使用validate.js提交和上传图像，但是当我使用所选图像提交表单时，什么也没有发生。 我一直在寻找解决方案，但是我没有找到解决方案。

    // **EDIT**
    // Add method to check imagesize
    $.validator.addMethod("imageSize",function(value, element, param) {
        return this.optional(element) || (element.files[0].size <= param);
    }, "This fileld is required.");
    // END: **EDIT**

var addNewsForm, format;
    addNewsForm = $("#newsPanel");
    format = ['png','jpe?g','gif'];

    addNewsForm.on("submit", function(e) {
        e.preventDefault();

        //validate form
        $(this).validate({
            errorClass : "error",
            rules : {
                 news_image : {
                    required : true,
                    imageSize: 5242880,
                    accept : format
                 }
            },

         messages : {
             news_image : {
                required : "Please select an image for the news.",
                imageSize : "Image size should not be greater than 5MB.",
                accept : "Unsupported image format"
         },

         submitHandler : function(form) {
              sendData = {
                  news_image : $("#newsImage")
              }; // end of sendData

         $(form).ajaxSubmit({
             type : "POST",
             data : sendData,
             url : "action_news.php",
             success : function(getData) {
                   $("#pageMsg").html(getData);
             }
         }); // end of ajaxSubmit
    }, // end of submitHandler
}); // end of document ready

 <form method="get" id="newsPanel" enctype="multipart/form-data">
     <div id="pageMsg"></div>
     <input type="file" id="newsImage" name="news_image" size="40" id="newsImage">
 </form>

有什么更好的方法可以做到这一点？

Answer 1

您错过了message对象的结束符} ，现在SubmitHandler处于messages对象内部。

您还缺少})来关闭此函数addNewsForm.on("submit", function (e) { 。

尝试使用下面的代码，看看它是否有效。

addNewsForm.on("submit", function (e) {
    e.preventDefault();

    //validate form
    $(this).validate({
        errorClass: "error",
        rules: {
            news_image: {
                required: true,
                imageSize: 5242880,
                accept: format
            }
        },
        messages: {
            news_image: {
                required: "Please select an image for the news.",
                imageSize: "Image size should not be greater than 5MB.",
                accept: "Unsupported image format"
            },
        },
        submitHandler: function (form) {
            sendData = {
                news_image: $("#newsImage")
            }; // end of sendData

            $(form).ajaxSubmit({
                type: "POST",
                data: sendData,
                url: "action_news.php",
                success: function (getData) {
                    $("#pageMsg").html(getData);
                }
            }); // end of ajaxSubmit
        }, // end of submitHandler

        }); // end of document ready

    })