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

Question

我正在尝试使用 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 很陌生，我想知道我哪里出了问题。感谢您的帮助。

Answer 1

试试这个，可能会有所帮助

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