Question

使用以下代码，我使用下面的表格将图像上传到我的服务器

<form id="form" method="POST">
    <input name="image" type="file" />
    <br/>
    <input type="submit" />
</form>

并使用以下.js代码

$("#form").submit(function(e) {
var formData = new FormData($(this)[0]);
$.ajax({
            url: "uploadimage.php",
            type: "POST",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false
        });
         return false
    });

但我需要在提交表单之前提出规则，因此我需要使用验证。

示例：

$("#form").validate({
submitHandler: function(form) {
$("#form").submit(function(e) {
var formData = new FormData($(this)[0]);
$.ajax({
            url: "uploadimage.php",
            type: "POST",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false
        });
         return false
    });
    },rules: {
        image: "required"
              },
            messages: {
                image: "image is required"
                      }
 });

但此代码不起作用

Answer 1

“但此代码不起作用”

那是因为你在插件.submit()中放了一个submitHandler处理程序......

submitHandler: function(form) {
    $("#form").submit(function(e) { ....

插件的submitHandler已正确处理默认的submit事件，只需在表单有效时触发按钮点击。

通过在其中放置另一个.submit()处理程序，它永远不会触发，因为表单的唯一提交事件已经发生。

删除额外的.submit()处理程序

submitHandler: function (form) {
    $.ajax({
        // your options
    });
    return false;
},

验证演示：http://jsfiddle.net/8tebdxn4/

此外，如果您要上传文件，则需要在enctype代码中使用正确的<form>属性...

<form id="form" method="POST" enctype="multipart/form-data">

对提交表单ajax发布进行验证

1 个答案: