只有在没有ajax文件的情况下，文件上传和PHP验证才有效

我有一个简单的文件上传表单，只有当我从表单html文件中删除ajax脚本时，它才能正常工作。在提交时，我被带到一个空白页，上面有正确的错误或成功消息（它像应该的那样进行验证）

如果我包含它，它会绕过我所有的参数，直接跳到最后一个错误。说你必须上传一个文件才能继续

我的ajax文件中是否缺少某些内容？我不明白为什么它会跳过我所有的验证

谢谢你能给我的帮助

表单Html文件

<form enctype="multipart/form-data" id="anytimereg-form" class="shake" method="post" action="test-process-form.php'?>">                 
    <div id="frm-filehandler">
        <div id="file-drop" class="well">
            <input type="file" name="upload" id="uplfile" class="inputfile" />
            <label for="uplfile"><i class="fa fa-upload" aria-hidden="true"></i>Choose a file</label>
        </div><!--end #file-drop-->
    </div><!--end #frm-filehandler-->
    <input type="hidden" name="action" value="upload"/>
    <button id="submit" name="submit" type="submit" class="action-button btn-lg">Submit Registration</button>
</form>

// Set up an event listener for the contact form.
$(form).submit(function(event) {
    $('.error-message').remove();
    // Serialize the form data.
    var formData = $(form).serialize();

    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData,
        dataType :'json',
        encode:true
    })
    .done(function(data){
        //Log the data into the console so that we can be sure what is happening
        console.log(data);

        //If we do have errors create the 
        if(!data.successmessage){
            if(data.errors){
                $(form).removeClass('success');
                $('.submit-success').remove();

                $(form).addClass('form-has-error'); // add the form-has-error-class

                if(data.errors.upload){
                    $('#frm-filehandler').addClass('has-error'); // add the error class to show red input
                    $('#frm-filehandler').append('<div class="error-message"><p>' + data.errors.upload + '</p></div>'); 
                    // add the actual error message under our input
                }
                $('footer').prepend('<div class="error-message"><p>There are errors with your submission. Errors will be marked in red</p></div>');

            }//end data errors
        }//end no data successmessage

        else if(data.successmessage){
            //Remove the errors stuff
            $('.error').remove();
            $('.error-message').remove();
            $(form).removeClass('form-has-error'); // add the form-has-error-class
            $('.submit-success').remove();
            //Add the success stuff
            $(form).addClass('success');


            $('footer').prepend('<div class="success-message"><p>' + data.successmessage + '</p></div>');

        }//End if successmessage
    })//end done function

    .fail(function(data){
        //If there is a failed submission lets log the errors
        console.log(data);
    });

    //Stop the broweser from submitting the form
    event.preventDefault();
    });
});   

选择一个文件
提交注册

test process.php

<?php
$errors = array();
$data = array();

// A list of permitted file extensions
$allowed = array('png', 'jpg', 'pdf');

if(isset($_FILES['upload']) && $_FILES['upload']['error'] == 0){

    $extension = pathinfo($_FILES['upload']['name'], PATHINFO_EXTENSION);
    //Max Fiels Size
    $maxsize = 2097152;
    //File Size
    $file_size = $_FILES['upload']['size'];
    //The File Path
    $file_path = '../../../../../upl_docs/';
    //The File Name
    $file_name = $_FILES['upload']['name'];

    //Is the file type allowed
    if(!in_array(strtolower($extension), $allowed)){
        $errors['upload'] = 'File type not allowed';

    }
    //Does the file already exist
    if(file_exists($file_path.$file_name)){
        $errors['upload'] = $file_name.' That file already exists. Please select another or rename your file.';

    }
    //is the file size to big
    if($file_size >= $maxsize){
        $errors['upload'] = 'Your File is too large. File must be less than 2 megabytes.';

    }

    if(empty($errors)){
        //We upload the file to outside of the root directory for security reasons
        if(move_uploaded_file($_FILES['upload']['tmp_name'], $file_path.$file_name)){
            $success['upload'] = $file_name.' Message: File has been uploaded';

            $data['success'] = $success;

        }else{
            $errors['upload'] = 'Could not find the directory';
        }

        //$data['success'] = $success;
    }//If empty of errors
    else{
        $data['success'] = false;
        $data['errors']  = $errors;
    }

}else{
    $errors['upload'] = 'You must upload a File to continue';
    $data['errors'] = $errors;
}
echo json_encode($data);
?>

Ajax文件

<form enctype="multipart/form-data" id="anytimereg-form" class="shake" method="post" action="test-process-form.php'?>">                 
    <div id="frm-filehandler">
        <div id="file-drop" class="well">
            <input type="file" name="upload" id="uplfile" class="inputfile" />
            <label for="uplfile"><i class="fa fa-upload" aria-hidden="true"></i>Choose a file</label>
        </div><!--end #file-drop-->
    </div><!--end #frm-filehandler-->
    <input type="hidden" name="action" value="upload"/>
    <button id="submit" name="submit" type="submit" class="action-button btn-lg">Submit Registration</button>
</form>

// Set up an event listener for the contact form.
$(form).submit(function(event) {
    $('.error-message').remove();
    // Serialize the form data.
    var formData = $(form).serialize();

    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData,
        dataType :'json',
        encode:true
    })
    .done(function(data){
        //Log the data into the console so that we can be sure what is happening
        console.log(data);

        //If we do have errors create the 
        if(!data.successmessage){
            if(data.errors){
                $(form).removeClass('success');
                $('.submit-success').remove();

                $(form).addClass('form-has-error'); // add the form-has-error-class

                if(data.errors.upload){
                    $('#frm-filehandler').addClass('has-error'); // add the error class to show red input
                    $('#frm-filehandler').append('<div class="error-message"><p>' + data.errors.upload + '</p></div>'); 
                    // add the actual error message under our input
                }
                $('footer').prepend('<div class="error-message"><p>There are errors with your submission. Errors will be marked in red</p></div>');

            }//end data errors
        }//end no data successmessage

        else if(data.successmessage){
            //Remove the errors stuff
            $('.error').remove();
            $('.error-message').remove();
            $(form).removeClass('form-has-error'); // add the form-has-error-class
            $('.submit-success').remove();
            //Add the success stuff
            $(form).addClass('success');


            $('footer').prepend('<div class="success-message"><p>' + data.successmessage + '</p></div>');

        }//End if successmessage
    })//end done function

    .fail(function(data){
        //If there is a failed submission lets log the errors
        console.log(data);
    });

    //Stop the broweser from submitting the form
    event.preventDefault();
    });
});   

//为联系人窗体设置事件侦听器。
$（表格）。提交（功能（事件）{
$（'.error message'）.remove（）；
//序列化表单数据。
var formData=$（form）.serialize（）；
$.ajax({
键入：“POST”，
url:$（form.attr（'action'），
数据：formData，
数据类型：'json'，
编码：正确
})
.完成（功能（数据）{
//将数据记录到控制台中，以便我们能够确定发生了什么
控制台日志（数据）；
//如果我们确实有错误，请创建
如果（！data.successmessage）{
if（data.errors）{
$（form.removeClass（'success'）；
$（'.submit success'）.remove（）；
$（form）.addClass（'form-has-error'）；//添加form has error类
if（data.errors.upload）{
$（'#frm filehandler'）.addClass（'has-error'）；//添加错误类以显示红色输入
$（“#frm filehandler”）.append（“”+data.errors.upload+”
”）；
//在输入下添加实际的错误消息
}
$（'footer'）.prepend（“您的提交有错误。错误将以红色标记”）；
}//结束数据错误
}//结束无数据成功消息
else if（data.successmessage）{
//删除错误内容
$（'.error'）.remove（）；
$（'.error message'）.remove（）；
$（form）.removeClass（'form-has-error'）；//添加form-has-error类
$（'.submit success'）.remove（）；
//添加成功的东西
$（form.addClass（'success'）；
$（'footer'）.prepend（“”+data.successmessage+”
）；
}//如果消息成功，则结束
})//结束函数
.失败（功能（数据）{
//如果提交失败，让我们记录错误
控制台日志（数据）；
});
//阻止浏览者提交表单
event.preventDefault（）；
});
});   

老实说，您发布的AJAX代码太糟糕了。。。显示/隐藏简单的成功或错误消息是多么糟糕和复杂的方式啊。我的意思是，如果表单成功验证，则需要六行代码来隐藏错误消息

---

我会重新编程（包括PHP），使它更简单。不应该用所有这些代码来制作一个简单的AJAX表单

不能像处理文本数据那样发布文件。您需要使用xhr请求来发布文件

有关更多信息：

---

谢谢您的回复，谢谢您的回复，没有错误，我已经包含了jquery库。是的，我是在服务器上运行的，当我在开发工具中查看响应时，我得到的是和object的响应上载：“您必须上载一个文件才能继续”。是否有更好的方法来查看响应？是的，但作为注释会更好。