使用jquery序列化的多文件上传仅在第二次调用时有效

Question

我遇到一个奇怪的问题：具有多个文件和表单值的表单ajax调用非常有效，但仅适用于第二次调用。第一次调用以success:function(result("else"条件结束。第二个调用运行良好，并将所有数据发送到php。所以我点击了一次提交按钮，它显示了一个空的错误框，我再次点击提交按钮，一切都很完美。

这怎么可能，如何解决？

更新#1:找到了解决方法，但没有找到解决方案。当我把if (result==="") { $(".form-application").submit(); }放在成功函数下面时，它就起作用了。但是那太脏了。。。并且它将所有文件上传两次！：-(

问题解决David Knipe提供了解决方案！！非常感谢！！

JQUERY:

$(".form-application").submit(function(e) {
e.preventDefault();
$("#btnSubmit2").text("Please wait...");
$("#btnSubmit2").attr("disabled", true);    
var files = $('#files')[0].files;
var form = $(this);
var error='';       
var formData = new FormData(this);
grecaptcha.ready(function() {
grecaptcha.execute('6Le4Qb0UAAAAAHUPcsmVYIk7zc4XCsiBnf6oE-fP', {action: 'create_comment'}).then(function(token) {
$('<input>').attr({
type: 'hidden',
value: token,
name: 'token'
}).appendTo('form');
for(var count = 0; count<files.length; count++)
{
var name = files[count].name;
var extension = name.split('.').pop().toLowerCase();
if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)
{
error += "Invalid " + count + " Image File"
}
else
{
formData.append("files[]", document.getElementById('files').files[count]);
}
}                   
if(error == '')
{                   
$.ajax({
url: form.attr("action"),
method: form.attr("method"),
data: formData,
processData: false,
contentType: false,
success: function(result) {
if (result == "0") {
$("#btnSubmit2").text("Thank you!");
$("#btnSubmit2").attr("disabled", true); 
$(".output_message").text("");              
$(':input','.form-application')
.not(':button, :submit, :reset, :hidden')
.val('')
.prop('checked', false)
.prop('selected', false);
$(".output_message").append("<div class='alert alert-success alert-dismissible fade show' role='alert'>We have received your application!</div>");                          
} else {
$(".output_message").text("");
$(".output_message").append("<div class='alert alert-danger alert-dismissible fade show' role='alert'>"+result+"</div>");       
$("#btnSubmit2").attr("disabled", false); 
$("#btnSubmit2").text("try again");
}
}
});     
}
else
{
alert(error);
}   
});
});
return false;
});

HTML:

<form class="form-application" id="applicationform" method="post" action="https://<?PHP echo $_SERVER['HTTP_HOST']; ?>/include/process-application.php" enctype="multipart/form-data"> 
<input type="hidden" name="crsf" value="<?=$_SESSION['crsf']?>"/>
<input type="hidden" name="crsf-expire" value="<?=$_SESSION['crsf-expire']?>"/>       
<div class="space40"></div>
<h6>Name</h6>
<input name="name" type="text" class="form-control" placeholder="Your Name">
<div class="space30"></div>        
<h6>Email</h6>
<input name="email" type="text" class="form-control" placeholder="Your Email Address">
<div class="space30"></div>
<h6>Instagram Name</h6>
<input name="instagram" type="text" class="form-control" placeholder="Your Instagram Name">
<div class="space30"></div>
<h6>City & Country</h6>
<input name="from" type="text" class="form-control" placeholder="Where do you live?">
<div class="space30"></div>
<h6>Tell us more about you</h6>
<textarea name="message" class="form-control" rows="3" placeholder="Write some details about you, so we know you better."></textarea>
<div class="space30"></div> 
<h6>Upload some photos of yourself</h6>         
<div class="file-field">
<div class="btn btn-aqua">
<input name="files" id="files" type="file" accepts="image/*" multiple>
</div>
<div class="file-path-wrapper">
</div>
<div class="space20"></div>         
</div>      
</div>
<div class="col-12 text-center">
<button id="btnSubmit2" type="submit" class="btn btn-full-rounded btn-aqua">Submit Application</button>
<div class="space10"></div>              
<span class="output_message"></span>   
</div>   
</form>

PHP脚本/include/process-application.PHP

<?PHP
echo "0"; 
?>

Answer 1

好吧，我想我已经想通了。CCD_ 2在新的CCD_ 3元素上设置令牌属性。但这是在var formData = new FormData(this);之后，所以令牌不会包含在formData中。然后我猜你会得到一个身份验证错误，我猜它甚至在进入PHP部分之前就完成了身份验证。这将只是一个HTTP401响应，没有身体，因此""。但是，在第二次尝试时，已经使用正确的令牌创建了<input>，并最终用于身份验证。

Answer 2

要么继续提交，要么继续操作。从表单标签中删除操作，它将在中工作