使用serailseArray通过AJAX发送formdata并验证模糊处理的每个输入文本

时间:2017-07-10 13:37:20

标签: php jquery ajax

我想验证单个文本字段并使用type="file"onblur输入onchange字段。我在这段代码中使用了AJAX,jQuery,PHP。请帮我解决这个问题。

AJAX代码:

function validate()
{
    var fd = new FormData();
    var file_data = $('input[type="file"]')[0].files; // for multiple files
    for(var i = 0;i<file_data.length;i++){
        fd.append("file_"+i, file_data[i]);
    }
    var other_data = $('#user_details').serializeArray();
    $.each(other_data,function(key,input){
        fd.append(input.name,input.value);
    });
    $.ajax({
        url: "validate.php",
        type: "POST",       // Type of request to be send, called as method
        data: fd,           // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        contentType: false, // The content type used when sending data to the server.
        cache: false,       // To unable request pages to be cached
        processData: false, // To send DOMDocument or non processed data file it is set to false
        success: function(data) { $("#firstname").html(data); },
        failure: function(errormsg) { console.log(errormsg); }
    });
}

HTML code:

<form id="user_details" method="post" enctype="multipart/form-data">
  <table>
    <tr><td>First Name</td><td><input type="text" id="first_name" name="firstname" onblur="validate()"></td><td id="firstname"></td></tr>
    <tr><td>Last Name</td><td><input type="text" id="last_name" name="lastname" onblur="validate()"></td><td id="lastname"></td></tr>
    <tr><td>Upload File</td><td><input type="file" id="file_name" name="file" onchange="validate()"></td><td id="file"></td></tr>
    <tr><td><input type="submit" value="Submit"></td></tr>
  <table>
</form>

1 个答案:

答案 0 :(得分:0)

尝试以下代码。简单的ajax文件上传和php valiadation其工作正常检查并让我知道

<!DOCTYPE html>
<html>
<head>
  <title>test2</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<?php
    if(isset($_GET['ajaxcall'])){
        $data=array();
        if(!isset($_FILES['file_name']['name']) || $_FILES['file_name']['name'] == ""){
            $data[]['msg']="File is required";
        }
        if(!isset($_POST['firstname']) || $_POST['firstname']==""){
            $data[]['msg']="First name is required";
        }
        if(!isset($_POST['lastname']) || $_POST['lastname']==""){
            $data[]['msg']="Last name is required";
        }
       echo json_encode($data);
       exit();
    }
?>

<form id="user_details" method="post" enctype="multipart/form-data">
  <table>
    <tr><td>First Name</td><td><input type="text" id="first_name" name="firstname" onblur="validate()"></td><td id="firstname"></td></tr>
    <tr><td>Last Name</td><td><input type="text" id="last_name" name="lastname" onblur="validate()"></td><td id="lastname"></td></tr>
    <tr><td>Upload File</td><td><input type="file" id="file_name" name="file_name" onchange="validate()"></td><td id="file"></td></tr>
    <tr><td><input type="button" value="Submit" value="1"></td></tr>
  <table>
</form>
<script type="text/javascript">
  function validate()
{

    var fd = new FormData(document.getElementById("user_details"));
    $.ajax({
        url: "stack2ajaxfile.php?ajaxcall=1",
        type: "POST",       // Type of request to be send, called as method
        data: fd,           // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        contentType: false, // The content type used when sending data to the server.
        cache: false,       // To unable request pages to be cached
        processData: false, // To send DOMDocument or non processed data file it is set to false
        success: function(data) { $("#firstname").html(data); },
        failure: function(errormsg) { console.log(errormsg); }
    });
}
</script>
</body>
</html>