如何使用jquery和ajax更新表单并提交

Question

I am trying to submit a form using Ajax, but my form contains a file field and a text field. The file field fails but the text field work

THE FORM

<form id="page" enctype="multipart/form-data" >
    <input type="text" name="text" id="text">
    <input type="file" name="image" id ="image">
    <button>Submit</button>
</form>

THE JS SCRIPT FOR SUBMISSION

$('#page').validate({
    rules: {
        image:{
            required: true
        },
        text:{
            required: true
        }
    },
    messages: {
        image: {
            required: "required"
        },
        text: {
            required: "required"
        }
    },

    submitHandler : function(){                     
        $.ajax({  
            type: "POST",
            cache:false,  
            url: "finish.html",  
            data: $('#page').serialize(),
            success: function(data) {  
                alert(data);  

            } 

    });
});

Im really new to javascript and jquery, please I want to know where I am going wrong. Thanks for helping.

Answer 1

Try this, It may help

<input type="file" name="fileToUpload" id="fileToUpload" />
<input type="button" value="Save" onclick="savepic()" /> 
                      //you can also use event listeners instead of onclick

jQuery Code

<script type = "text/javascript">
    function savepic() {
        //can perform client side field required checking for "fileToUpload" field
        $.ajaxFileUpload({
            url: 'doajaxfileupload.php',
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',
            success: function(data, status) {
                if (typeof(data.error) != 'undefined') {
                    if (data.error != '') {
                        alert(data.error);
                    } else {
                        alert(msg); // returns location of uploaded file
                    }
                }
            },
            error: function(data, status, e) {
                alert(e);
            }
        })
        return false;
} 
</script>