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

时间:2014-09-02 08:49:54

标签: javascript jquery ajax forms

我正在尝试使用Ajax提交表单,但我的表单包含文件字段和文本字段。文件字段失败,但文本字段工作

表格

<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>

提交的JS脚本

$('#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);  

            } 

    });
});

我是javascript和jquery的新手,请知道我哪里出错了。谢谢你的帮助。

1 个答案:

答案 0 :(得分:0)

试试这个,这可能有帮助

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

jQuery代码

<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>