提交包含文本输入和文件输入的表单

Submit form containing text input and file input

本文关键字:输入 表单 文件 文本 提交 包含      更新时间:2023-09-26

我正在使用Jquery和Ajax向php页面提交一个包含text inputfile input的表单,但在提交之前,我想在提交之前验证文本输入。

下面是表单页

            <form id="registrationForm"  method="POST"  name="registrationForm" enctype="multipart/form-data">
                <input type="text"  name="firstName" id="firstName" />
                <input type="file" name="file" id="file" />
                <button type="submit"> UPLOAD</button>
            </form>

和Javascript页面

 $('#registrationForm').validate({
        rules: {
            firstName:{
                required: true
            }
        },
        message:{
            firstName: {
                required: "Please Enter Name"
            }
        },

    submitHandler : function(){
      //grab all form data  
      var formData = new FormData(this);
      $.ajax({
        url: 'submitPage.php',
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
          success: function(data) {  
            $('#message').html(data);  
            $('#message').html(data).hide().fadeIn(1500,function(){$('#message')});
            } 
        });
    }
    });

和PHP Page,即接收页面

        <?php
            $firstName=$_POST['firstName'];
            $file=$_FILES['file']['name'];
            echo $firstName;
            echo $file;
         ?>

在php接收页面返回null。我真希望有人能帮帮我。谢谢。

$('#registrationForm').validate({
        rules: {
            firstName:{
                required: true
            }
        },
        message:{
            firstName: {
                required: "Please Enter Name"
            }
        },

    submitHandler : function(){
      //grab all form data  
      var formData = new FormData(document.querySelector("form"));
      $.ajax({
        url: 'submitPage.php',
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
          success: function(data) {  
            $('#message').html(data);  
            $('#message').html(data).hide().fadeIn(1500,function(){$('#message')});
            } 
        });
    }
    });