Question

我找到了jQuery ajax脚本来将文件上传到我项目文件夹中的特定目录。现在我正在尝试使用jQuery validation plugins验证字段。

一切都很完美，但我必须提交2次提交数据。当用户提交表单时，我无法使用Ajax一次发送数据。如果我点击2次，那么它的工作原理是不对的。我不知道为什么一次不工作。

请检查我的代码并帮我解决此问题。我将感激你如果你帮助我:)。

感谢。

的index.php

<div id="content" style="margin-top:10px;">
    <div style="height:80%;width:97%;border:2px solid black;padding:10px 8px;">
        <form action="upload.php" method="POST" id="uploadform">
            <input type="text" name="username" id="username">
            <input type="file" name="file"/>
            <input type="submit" id="submit" value="Upload"/>

            <div id="loader" style="display:none;">
                <center><img src="load.gif" /></center>
            </div>
            <div>
                Message : <div id="onsuccessmsg" style="border:5px solid #CCC;padding:15px;"></div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){

        $("#uploadform").validate({
            rules: {
                "username": {
                    required: true
                }
            },
            messages: {
                "username": {
                    required: "Please, enter a name"
                }
            },
            submitHandler: function (form) { // for demo

                $("#uploadform").on('submit',function(){
                    $("#loader").show();
                        var options={
                        url : $(this).attr("action"),
                        success : onsuccess
                    };
                    $(this).ajaxSubmit(options);
                    return false;
                });

                function onsuccess(response,status){
                    $("#loader").hide();
                    $("#onsuccessmsg").html("Status :<b>"+status+'</b><br><br>Response Data :<div id="msg" style="border:5px solid #CCC;padding:15px;">'+response+'</div>');
                }

                return false; // for demo
            }
        });
    });
</script>

upload.php的

<?php
    function getExtension($str){
        $i=strrpos($str,".");
        if(!$i){
            return"";
        }
        $l=strlen($str)-$i;$ext=substr($str,$i+1,$l);return $ext;
    }
    $formats = array("jpg", "png", "gif", "bmp", "jpeg", "PNG", "JPG", "JPEG", "GIF", "BMP");

    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
        $name = $_FILES['file']['name'];
        $size = $_FILES['file']['size'];
        $tmp  = $_FILES['file']['tmp_name'];
        if(strlen($name)){
            $ext = getExtension($name);
            if(in_array($ext,$formats)){
                if($size<(1024*1024)){
                    $imgn = time().".".$ext;
                        if(move_uploaded_file($tmp, "./uploads/".$imgn)){
                            echo "File Name : ".$_FILES['file']['name'];
                            echo "<br/>File Temporary Location : ".$_FILES['file']['tmp_name'];
                            echo "<br/>File Size : ".$_FILES['file']['size'];
                            echo "<br/>File Type : ".$_FILES['file']['type'];
                            echo "<br/>Image : <img style='margin-left:10px;' src='uploads/".$imgn."'>";
                        }else{
                            echo "Uploading Failed.";
                        }
                }else{
                    echo "Image File Size Max 1 MB";
                }
            }else{
                echo "Invalid Image file format.";
            }
        }else{
            echo "Please select an image.";
            exit;
        }
    }
?>

Answer 1

您的代码：

submitHandler: function (form) { 
    $("#uploadform").on('submit',function(){  // <-  GET RID OF THIS
        $("#submit").click();                 // <-  WHAT IS THIS??
        $("#loader").show();
        var options={
            url : $(this).attr("action"),
            success : onsuccess
        };
        $(this).ajaxSubmit(options); // initialize Forms plugin… can't be here
        return false;
    });

    function onsuccess(response,status){
        $("#loader").hide();
        $("#onsuccessmsg").html("Status :<b>"+status+'</b><br><br>Response Data :<div id="msg" style="border:5px solid #CCC;padding:15px;">'+response+'</div>');
    }
return false;
}

您的代码失败了，因为您在插件的submit回调函数中使用了jQuery submitHandler处理程序。这听起来很有趣，不是吗？

插件的submitHandler仅在单击提交按钮时触发，并且仅在表单有效时触发。（该插件自动处理提交/点击）因此，此处不需要另外的submit处理程序。我也不知道为什么你在click()处理程序中调用提交按钮的submit事件......没有意义。

这样的事情离工作代码更近了......

submitHandler: function (form) { 
    // all of your ajax stuff in here, no submit or click handlers needed
    return false;
}

此外，.ajaxSubmit(options)是Forms插件的初始化。因此，这就是您需要单击两次的原因。第一次单击初始化Forms插件。第二次单击提交表单，因为插件最终准备就绪。你不能将.ajaxSubmit()放在jQuery Validate插件的submitHandler回调中。

jQuery Validation Plugin不使用Ajax

1 个答案: