javascript - 进度条达到 100% 时未提交表单

Question

我在下面附上了我的 php.ini 的简化版本。 我有一个带有多个输入字段 + 上传文件选项的发件人。

提交表单时，上传栏会启动，当它达到 100% 时，我会看到“成功”警报，然后是“完成”警报。 (两次？？？) 然而，“action=sendEmail.php”形式和“url: sendEmail.php”形式都没有被触发——我想添加两者以查看是否有任何被触发。 请注意，当我删除 ajaxFrom 触发器时，将执行“sendEmail.php”。

那我做错了什么？应该改变什么来使“sendEmail.php”执行。 另外，为什么我会两次看到成功和完成者警报？ 成功 => 完成 => 成功 => 完成

基本形式:

 <form id="formmail" class="form-horizontal" name="formmail" method="POST" action="sendEmail.php" enctype="multipart/form-data">
.
.
.

我尝试(当然是分别)都使用提交按钮:

<input class="btn btn-sm" name='submit' type='submit' id='submit' tabindex='100' value="Submit"/>

还有一个简单的按钮:

<button class="btn btn-sm" name='submit' id='submit'>Submit</button>

JavaScript:

var progress
$(document).ready(function(){   
    $("#submit").click(function(){
        var form_data = $("#formmail").serialize();
        $("#formmail").ajaxForm({
            type: "POST",
            url: "sendEmail.php",
            data: form_data,
            beforeSend: function() {
                $("#progressBar").removeClass("hidden");
                progress = "0%";
                $('.progress-bar').css("width", progress);
                $('.progress-bar').html(progress);
            },
            uploadProgress: function (event, position, total, percentComplete) {
                progress = percentComplete + "%";
                $('.progress-bar').css("width", progress);
                $('.progress-bar').html(progress);  
            },
            success: function (data){
                alert("success");
            },
            complete: function(xhr){
                if(xhr.responseText) {
                    alert("complete");
                }
            },
        })
        .submit();
    });
});

Answer 1

您的代码有一个很常见的问题。默认情况下，提交按钮 ( <input type="submit"> ) 将自动提交表单。绑定(bind) click() jQuery 函数不会阻止表单提交。因此，对于每次点击提交按钮，sendEmail.php可能会调用两次，一次通过 HTML 表单提交，一次通过 JS。您可能只想要其中之一。

您可以将按钮的类型更改为 type="button" , 或添加 event.preventDefault()在你的click()功能。

顺便提一下，这里有一些针对您的代码的建议:

1. 为了 HTML 整洁，不要在 HTML 结构中混用单引号和双引号。此外，删除未使用的 class和 id属性。
2. 仅使用小写文件名。 URL 中的大写字母对用户不友好。