Ajax表单同时提交输入数据和文件而不响应


Ajax Form submit both input data and file no response

我有一个表单,需要提交文件和输入数据。我使用jQuery验证器检查表单,然后提交。

<form method="POST" id="form_1" action="../api.php" enctype="multipart/form-data" novalidate="novalidate">
    <input type="text" name="name" id="name" value="Amy" readonly="readonly">
    <input id="fileBox" class="fileUpload" type="file" name="img" accept="image/*" required>
    <input type="hidden" name="isSubmit" value="1"/>
</form>
<a id="btnSubmit" href="javascript:void(0)">Submit</a>
$("#btnSubmit").click(function(){
    if ($("#form_1").valid()){ //jquery validator to check the form
        $("#form_1").submit(function() {
            var formData = new FormData(($this)[0]);
            $ajax({
                type: "POST",
                url: "../../api.php",
                data: { 
                    action:"formSubmit", 
                    formData:formData
                }
            }).done(function(data){
                data = $.parseJSON(data);
            });
        });
    }
});

为什么点击btnSubmit没有响应?我的代码有什么问题?有人能帮我吗?

$("#form_1").submit(function(){ ... });

不触发提交,它只注册对提交作出反应的事件处理程序。相反,你应该先注册你的事件处理程序,然后在点击事件中触发它:

// at first you register event handler for when the form is submitted
$("#form_1").submit(function(){
    var formData = new FormData(($this)[0]);
    $ajax({
        type: "POST",
        url: "../../api.php",
        data: { action:"formSubmit", formData:formData}
    }).done(function(data){
         data = $.parseJSON(data);
    });
});
$("#btnSubmit").click(function(){
    if($("#form_1").valid()){ 
        // inside click event handler you trigger form submission
        $("#form_1").trigger('submit');
    }
});