Question

我正在使用ajax调用上传pdf文件。触发上传按钮后，ajax调用两次。我检查了整个代码。但无法得到任何解决方案。请帮助我:)。

我的代码是， HTML：

<div class="uk-form-row">
        <div id="loadingPDFUpload"><i class="uk-icon-spinner uk-icon-spin"></i></div>
        <div id="targetUpload"></div>
        <label class="uploadLbl">Upload Book:</label> 
        <div class="uploadWrap">
            <input name="pdfFile" id="pdfFile" type="file" size="30" />
            <input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" />
        </div>
    </div>

ajax代码：

function uploadPDF(){
$("#frm").attr("action","upload.php");
$("#loadingPDFUpload").show();
$("#frm").ajaxForm({
    target: '#targetUpload',
    complete: function(){
        $("#loadingPDFUpload").hide();
    }
}).submit();}

Answer 1

您有一个调用该函数的提交按钮，但该函数使用了表单submit方法。这可能会触发对该功能的双重调用。

我看到你正在使用jQuery和jQuery Form Plugin，所以这应该相对容易修复。我会直接在JavaScript中创建事件处理程序，以避免混乱标记。删除提交按钮的onclick属性：

<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" />

然后在您的代码中执行以下操作：

$(document).ready(function() {
    $('#frm').submit(function(e) {
        e.preventDefault(); //stops the default submit action
        $('#loadingPDFUpload').show();
        $(this).attr('action', 'upload.php');
        $(this).ajaxForm({
            target: '#targetUpload',
            complete: function(){
                $("#loadingPDFUpload").hide();
            });
        });
    })
});

Answer 2

您正在使用表单提交按钮来触发您的ajax调用

<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" />

因此，当您触发点击时，调用uploadPDF（）函数也会在 submit（）函数之后提交您的表单。这就是为什么函数被调用两次。

Answer 3

尝试在ajaxForm请求结束时删除提交。它正在再次提交表格。另请更新您的HTML代码。我无法在任何地方看到#frm。

Answer 4

函数uploadPDF（）应该返回false，以防止正常的表单提交。

与文档示例代码

中一样

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

Ajax调用了两次

4 个答案: